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請求的路由相匹配即可