ajax +node.js+mongodb

1.建立 ajax-mongo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>ajax</div>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
function test(){
    $.ajax(
        {
            url:"/getdata",
            type:'get',
            dataType:"json",
            success:function(data){
                
                console.log("ok");
                console.log(data)
            },
            error:function(error){
                console.log(error)
            }
            
        })
    
}
test()
</script>

</body>
</html>

2.新建test.js


var http=require("http");
var fs=require("fs");
http.createServer(function (req,res) {
    
   console.log(req.url)
   //匹配路由,沒有if和else if匹配路由會出現同源策略限制
    if(req.url=='/'){
        fs.readFile("ajax-mongo.html",'utf-8',function(err,data)
            res.end(data);    
            });
       
    }
    else if(req.url=='/getdata'){
        var MongoClient = require('mongodb').MongoClient;
            var url = 'mongodb://localhost:27017/';
            MongoClient.connect(url, { useNewUrlParser: true }, function (err, db) {
                if (err) throw err;
                var dbase = db.db("runoob");
                // var myobj={name:"菜鳥教程",url:"www.runoob"};
                // dbase.collection('site').insert(myobj,function(err,res){
                //     console.log("success")
                //     db.close()
                // })
                dbase.collection('site').find({}).toArray(function (err, data) {
                    if (err) throw err;
                        // data爲object,需要用stringify將js值(對象,數組)轉換爲string,
                        // argument must be one of type string or Buffer
                        console.log(data)
                    res.end(JSON.stringify(data)); 
                    console.log(typeof(JSON.stringify(data)))//string
                    db.close();
                
                })
            });   
    }
   
    

    

}).listen(6100,function(){
    console.log("start")
});


根據自己理解:6100端口開啓,訪問http://localhost:6100,後臺路由匹配 if 條件,fs讀ajax-mongo.html得到的data返回給http://localhost:6100,即頁面展示,頁面中ajax中的url請求http://localhost:6100/getData,匹配後臺test.js中的else if,然後mongodb中的數據返給ajax,請求成功輸出data。

3.結果如下:
在這裏插入圖片描述

ajax-mongo.html頁面是一次請求,請求地址是http://localhost:6100/
ajax請求接口(test.js)也是一次http請求,請求地址可以是http://localhost:6100/getData

if和else if的路由可以隨便寫,只要和ajax-mongo.html和其中ajax請求的路由相匹配即可

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章