如何不依賴后端返回的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);
}
});
});
