前一篇中已经将mock进行了讲解,这一篇中对mock在ajax中的应用讲一下
上篇总结:mockjs介绍总结
准备
- 准备一个
index.html
文件 - 将
jQuery
、mock
引入进去
<head>
<meta charset="utf-8">
<title>mockjs拦截ajax</title>
<!-- <script src="http://mockjs.com/dist/mock.js"></script> -->
<!-- mock CDN方式 -->
<script src="js/mock.js" type="text/javascript" charset="utf-8"></script>
<!-- mock 本地js方式 -->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- jquery CDN方式 -->
</head>
- 新建一个
mockjs.js
文件,将此文件引入到index.html
中,写在靠上的位置,让它的加载早于ajax请求
。
使用
- 在刚才建的
mockjs.js
中添加以下代码
Mock.mock('http://asd.asd',
{ 'fda':'@cname' })//地址需和ajax的一致
- 在
index.html
中添加一个ajax
请求
$.ajax({
url: 'http://asd.asd',
type: "get",
dataType: 'json',
success(res) {
console.log(res);
}
})
结果
6. 同理可得,其他形式照着写就行
在写一个复杂一点的
ajax
$.ajax({
url: 'http://test.com',
type: "post",
dataType: 'json',
success(res) {
console.log(res);
}
})
mock
var obj = {
'aa': '11',
'bb': '22',
'cc': '33',
'dd': '44'
};
Mock.setup({
timeout: 400 //400毫秒后响应请求
})
var Random = Mock.Random
Random.extend({
constellation: function(date) {
var constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']
return this.pick(constellations)
}
})
Mock.mock('http://test.com', {
"user|1-30": [{ // 随机生成1到3个数组元素
'name': '@cname', // 中文名称
'constellation': '@CONSTELLATION', //自定义返回星座
'id|+1': 1, // 属性值自动加 1,初始值为88
'age|18-28': 0, // 18至28以内随机整数, 0只是用来确定类型
'birthday': '@date("yyyy-MM-dd")', // 日期
'city': '@city(true)', // 中国城市
'color': '@color', // 16进制颜色
'isMale|1': true, // 布尔值
'isFat|1-2': true, // true的概率是1/3
'fromObj|2': obj, // 从obj对象中随机获取2个属性
'fromObj2|1-3': obj, // 从obj对象中随机获取1至3个属性
'brother|1': ['jack', 'jim'], // 随机选取 1 个元素
'sister|+1': ['jack', 'jim', 'lily'], // array中顺序选取元素作为结果
'friends|2': ['jack', 'jim'] // 重复2次属性值生成一个新数组
}, {
'gf|2-8': 'cname' //随机重复2-8次
}]
});
返回结果