文檔結(jié)構(gòu)
![]()
ajax.png
ajax.png
index.html代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({
url: 'http://127.0.0.1:8088/api/seller',
dataType: 'jsonp', //因?yàn)榭缬蛩糜肑SONP，
type: 'get', //JSONP只支持get方式請求撞牢，即使這里用的post應(yīng)該會被jQuery默認(rèn)改成get形式
data: {
test: 'ajax'
},
success: function (data) {
console.log(data)
}
})
});
});
</script>
</head>
<body>
<button>發(fā)送一個 HTTP POST 請求頁面并獲取返回內(nèi)容</button>
</body>
</html>
server.js代碼
let express = require('express'); //引入express模塊
let Mock = require('mockjs'); //引入mock模塊
var appData = require('./data.json'); //讀取data.json的數(shù)據(jù)
var seller = appData.seller; //appData一個對象{"seller":{"name":'zs',age:13},"goods":[{"id":1},{"id":2}],"ratings":[{"id":1},{"id":2}]}
var goods = appData.goods; //獲得不同數(shù)據(jù)
var ratings = appData.ratings; //獲得不同數(shù)據(jù)
let app = express(); //實(shí)例化express
//創(chuàng)建服務(wù)器接口方式之一
app.all('/seller', function(req, res) {
res.jsonp({
error: 0,
data: seller
})
})
app.listen('8088', function() {
console.log('server start at 8088')
});
- 點(diǎn)擊按鈕，既可在控制臺得到服務(wù)器的返回?cái)?shù)據(jù)
- 通過server.js代碼叔营，node服務(wù)器搭建成功
- 控制臺 node server.js運(yùn)行服務(wù)器屋彪，前端就可以訪問接口
Uncaught SyntaxError: Unexpected token :
注意因?yàn)榭缬颍詉ndex.html的ajax訪問用的jsonp方式,所以node服務(wù)器返回的數(shù)據(jù)是：res.jsonp绒尊，如果用res.json則會報(bào)錯：Uncaught SyntaxError: Unexpected token :
使用 Ajax 獲取 json 時畜挥，存在跨域限制，婴谱；而 jsonp 實(shí)際是請求一個 script砰嘁，然后允許里面的代碼使用 jsonp 方式，但返回結(jié)果確實(shí) json勘究，自然出錯矮湘，無法運(yùn)行
*上面創(chuàng)建接口方式還可以用另外的方式,index.html不變,改變server.js代碼
創(chuàng)建接口第二種方式
server.js代碼
let express = require('express'); //引入express模塊
let Mock = require('mockjs'); //引入mock模塊
var appData = require('./data.json'); //讀取data.json的數(shù)據(jù)
var seller = appData.seller; //appData一個對象{"seller":{"name":'zs',age:13},"goods":[{"id":1},{"id":2}],"ratings":[{"id":1},{"id":2}]}
var goods = appData.goods; //獲得不同數(shù)據(jù)
var ratings = appData.ratings; //獲得不同數(shù)據(jù)
let app = express(); //實(shí)例化express
var apiRouters = express.Router();
//創(chuàng)建服務(wù)器接口方式之二
apiRouters.get('/seller', function(req, res) {
res.jsonp({
errno: 0,
data: seller
})
})
apiRouters.get('/goods', function(req, res) {
res.jsonp({
errno: 0,
data: goods
})
})
//此時index.html中的url: 'http://127.0.0.1:8088/api/seller',
app.use('/api', apiRouters)//
app.listen('8088', function() {
console.log('server start at 8088')
});
創(chuàng)建接口第三種方式， 通過mockjs模擬數(shù)據(jù)
server.js代碼
let express = require('express'); //引入express模塊
let Mock = require('mockjs'); //引入mock模塊
var appData = require('./data.json'); //讀取data.json的數(shù)據(jù)
var seller = appData.seller; //appData一個對象{"seller":{"name":'zs',age:13},"goods":[{"id":1},{"id":2}],"ratings":[{"id":1},{"id":2}]}
var goods = appData.goods; //獲得不同數(shù)據(jù)
var ratings = appData.ratings; //獲得不同數(shù)據(jù)
let app = express(); //實(shí)例化express
//創(chuàng)建服務(wù)器接口方式之三
/**
* @param {[type]} req [客戶端發(fā)過來的請求所帶數(shù)據(jù)]
* @param {[type]} res [服務(wù)端的相應(yīng)對象口糕，可使用res.send返回?cái)?shù)據(jù)缅阳，res.json返回json數(shù)據(jù)，res.down返回下載文件]
*/
app.all('/api', function(req, res) {
res.jsonp(Mock.mock({
"status": 200,
"data|1-9": [{
"name|5-8": /[a-zA-Z]/,
"id|+1": 1,
"value|0-500": 20
}]
}));
});
app.listen('8088', function() {
console.log('server start at 8088')
});
