文档结构
![]()
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', //因为跨域所用用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')
});
