文檔結構
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', //因為跨域所用用JSONP，
type: 'get', //JSONP只支持get方式請求，即使這里用的post應該會被jQuery默認改成get形式
data: {
test: 'ajax'
},
success: function (data) {
console.log(data)
}
})
});
});
</script>
</head>
<body>
<button>發送一個 HTTP POST 請求頁面並獲取返回內容</button>
</body>
</html>
server.js代碼
let express = require('express'); //引入express模塊
let Mock = require('mockjs'); //引入mock模塊
var appData = require('./data.json'); //讀取data.json的數據
var seller = appData.seller; //appData一個對象{"seller":{"name":'zs',age:13},"goods":[{"id":1},{"id":2}],"ratings":[{"id":1},{"id":2}]}
var goods = appData.goods; //獲得不同數據
var ratings = appData.ratings; //獲得不同數據
let app = express(); //實例化express
//創建服務器接口方式之一
app.all('/seller', function(req, res) {
res.jsonp({
error: 0,
data: seller
})
})
app.listen('8088', function() {
console.log('server start at 8088')
});
- 點擊按鈕，既可在控制台得到服務器的返回數據
- 通過server.js代碼，node服務器搭建成功
- 控制台 node server.js運行服務器，前端就可以訪問接口
Uncaught SyntaxError: Unexpected token :
注意因為跨域，所以index.html的ajax訪問用的jsonp方式,所以node服務器返回的數據是：res.jsonp，如果用res.json則會報錯：Uncaught SyntaxError: Unexpected token :
使用 Ajax 獲取 json 時，存在跨域限制，；而 jsonp 實際是請求一個 script，然后允許里面的代碼使用 jsonp 方式，但返回結果確實 json，自然出錯，無法運行
*上面創建接口方式還可以用另外的方式,index.html不變,改變server.js代碼
創建接口第二種方式
server.js代碼
let express = require('express'); //引入express模塊
let Mock = require('mockjs'); //引入mock模塊
var appData = require('./data.json'); //讀取data.json的數據
var seller = appData.seller; //appData一個對象{"seller":{"name":'zs',age:13},"goods":[{"id":1},{"id":2}],"ratings":[{"id":1},{"id":2}]}
var goods = appData.goods; //獲得不同數據
var ratings = appData.ratings; //獲得不同數據
let app = express(); //實例化express
var apiRouters = express.Router();
//創建服務器接口方式之二
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')
});
創建接口第三種方式， 通過mockjs模擬數據
server.js代碼
let express = require('express'); //引入express模塊
let Mock = require('mockjs'); //引入mock模塊
var appData = require('./data.json'); //讀取data.json的數據
var seller = appData.seller; //appData一個對象{"seller":{"name":'zs',age:13},"goods":[{"id":1},{"id":2}],"ratings":[{"id":1},{"id":2}]}
var goods = appData.goods; //獲得不同數據
var ratings = appData.ratings; //獲得不同數據
let app = express(); //實例化express
//創建服務器接口方式之三
/**
* @param {[type]} req [客戶端發過來的請求所帶數據]
* @param {[type]} res [服務端的相應對象，可使用res.send返回數據，res.json返回json數據，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')
});