前端数据与后台分离，使用mockjs模拟后台返回json数据
2017-02-17 本文已影响4495人
幺加幺
如何不依赖后端返回的JSON数据，比后台早一步下班
使用mockjs ，造json数据
例子：
效果：
Paste_Image.png
操作，点击mockjs 随机产生json数据。
代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<div>
<h1 id="mockjs">mockjs</h1>
</div>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="http://mockjs.com/dist/mock.js"></script>
<script type="text/javascript">
//调用mock方法模拟数据
Mock.mock(
'http://mockjs', {
"userName": '@name', //模拟名称
"age|1-100": 100, //模拟年龄(1-100)
"color": "@color", //模拟色值
"date": "@date('yyyy-MM-dd')", //模拟时间
"url": "@url()", //模拟url
"content": "@cparagraph()" //模拟文本
}
);
//ajax请求
$("#mockjs").click(function() {
$.ajax({
url: "http://mockjs", //请求的url地址
dataType: "json", //返回格式为json
async: true, //请求是否异步，默认为异步，这也是ajax重要特性
data: {}, //参数值
type: "GET", //请求方式
beforeSend: function() {
//请求前的处理
console.log('start');
},
success: function(req) {
//请求成功时处理
console.log(req);
},
complete: function() {
//请求完成的处理
console.log('end');
},
error: function(err) {
//请求出错处理
console.log(err);
}
});
});
</script>
</body>
</html>
如果想请求多一个api呢？
只需要建多一个对象
Mock.mock(
'http://getJSON', {
"userName": '@name', //模拟名称
"age|1-100": 100, //模拟年龄(1-100)
}
);
调用方法同上：
$("#getJSON").click(function() {
$.ajax({
url: "http://getJSON", //请求的url地址
dataType: "json", //返回格式为json
async: true, //请求是否异步，默认为异步，这也是ajax重要特性
data: {}, //参数值
type: "GET", //请求方式
beforeSend: function() {
//请求前的处理
console.log('start');
},
success: function(req) {
//请求成功时处理
console.log(req);
},
complete: function() {
//请求完成的处理
console.log('end');
},
error: function(err) {
//请求出错处理
console.log(err);
}
});
});
