mockjs拦截ajax

最新推荐文章于 2024-04-11 16:03:55 发布

苦夏木禾

最新推荐文章于 2024-04-11 16:03:55 发布

阅读量734

点赞数 1

分类专栏： mock

本文链接：https://blog.csdn.net/lhkuxia/article/details/110542301

版权

mock 专栏收录该内容

7 篇文章 2 订阅

订阅专栏

前一篇中已经将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次
	}]
});

返回结果
在这里插入图片描述

苦夏木禾

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
mockjs拦截ajax

前一篇中已经将mock进行了讲解，这一篇中对mock在ajax中的应用讲一下上篇总结：文章目录准备使用准备准备一个index.html文件将jQuery、mock引入进去 <head> <meta charset="utf-8"> <title>mockjs拦截ajax</title> <!-- <script src="http://mockjs.com/dist/mock.js"></script>
复制链接

扫一扫