mock.js增删改查的用法

news/2024/7/19 14:29:48 标签: js

今天对mock.js了解了一下,觉得还可以,然后把增删改查用mock.js做了一遍,有什么不对,希望大家指出来哈,好,废话不多说上代码。
先引入文件

<script src="js/jQuery.js" type="text/javascript" charset="utf-8"></script>
<script src="http://mockjs.com/dist/mock.js"></script>

HTML页面增删改查按钮

		<button type="button" id="cancel">删除</button>
		<button type="button" id="add">添加</button>
		<button type="button" id="redact">编辑</button>
		<button type="button" id="hunt">搜索</button>

假数据

/*模拟假数据的方式*/
		var arr = [
		{name: 'fei',age: 20,id: 1},
		{name: 'liang',age: 30,id: 2},
		{name: 'jun',age: 40,id: 3},
		{name: 'ming',age: 50,d: 4}
		]

添加

$("#add").click(function() {
			Mock.mock('http://www.bai.com', 'push', function(options) {
				arr.push({name:'jia',age:18,id:5}) //要添加的数据
				return arr; //返回这个数组,也就是返回处理后的假数据
			})
			$.ajax({
				url: 'http://www.bai.com',
				type: "PUSH",
				data: {
					id: 5//需要添加id=5的数据
				},
				dataType: 'json',
				success: function(e) {
					console.log(e)
				}
			})
		})

删除

$("#cancel").click(function() {
			Mock.mock('http://www.bai.com', 'delete', function(options) {
				var id = parseInt(options.body.split("=")[1]) //获取删除的id
				var index;
				for (var i in arr) {
					if (arr[i].id === id) { //在数组arr里找到这个id
						index = i
						break;
					}
				}
				arr.splice(index, 1) //把这个id对应的对象从数组里删除
				return arr; //返回这个数组,也就是返回处理后的假数据
			})
			$.ajax({
				url: 'http://www.bai.com',
				type: "DELETE",
				data: {
					id: 1 //假设需要删除id=1的数据
				},
				dataType: 'json',
				success: function(e) {
					console.log(e)
				}
			})
		})

编辑

$("#redact").click(function(){
			Mock.mock('http://www.bai.com', 'change', function(options) {
				var id = parseInt(options.body.split("=")[1]) //获取编辑的id
				for (var i in arr) {
					if (arr[i].id === id) { //在数组arr里找到这个id
						arr[i].name = decodeURI(options.body.split("=")[2])//对其进行解码
					}
				}
				return arr; //返回这个数组,也就是返回处理后的假数据
			})
			$.ajax({
				url: 'http://www.bai.com',
				type: "CHANGE",
				data: {
					id: 2,//需要编辑id=2的数据
					name:"已修改"//修改过后的名字
				},
				dataType: 'json',
				success: function(e) {
					console.log(e)
				}
			})
		})

搜索

$("#hunt").click(function(){
			Mock.mock('http://www.bai.com', 'post', function(options) {
				var id = parseInt(options.body.split("=")[1]) //获取查找的id
				var item={}
				for (var i in arr) {
					if (arr[i].id === id) { //在数组arr里找到这个id
						item=arr[i];
					}
				}
				return item; //返回这个数组,也就是返回处理后的假数据
			})
			$.ajax({
				url: 'http://www.bai.com',
				type: "post",
				data: {
					id:1//要查找的数据的id
				},
				dataType: 'json',
				success: function(e) {
					console.log(e)
				}
			})
		})

如果有什么不足,可以请各位大佬留言Thanks♪(・ω・)ノ。


http://www.niftyadmin.cn/n/821505.html

相关文章

dedecms模板配置大概流程

第一步&#xff1a;去模板网下载一个自己相用的模板&#xff0c;例如&#xff1a;AB模板网&#xff0c;模板之家等等&#xff1b; 第二步&#xff1a;把自己下载好的网站模板上传至服务器&#xff0c;像我用的是宝塔linux面板&#xff0c;上传成功之后&#xff0c;解压下载的文…

2020-1024=996? 2020年,程序员如何搞定老板!

在职场中&#xff0c;演技高超的人一定不少&#xff0c;然而为何存在这么多人热衷于“演艺事业”呢&#xff1f;原因其实很明显&#xff0c;就是大家都很怕&#xff0c;“自己当前空闲” 这件事&#xff0c;被别人知道了。为何会怕这件事呢&#xff1f;1、会招来处于忙碌状态同…

漫画 | 我用了10年 从深圳流水线厂妹做到纽约高薪程序员!

如果说人生是一条大河&#xff0c;那么她这条河一定走很凶猛&#xff01;我也是农村出身的孩子&#xff0c;深度的明白她这一路走过来有多苦多难&#xff0c;当然她也会很享受这整个奋斗的过程。我身边有太多这样的案例&#xff0c;高中毕业南下打工&#xff0c;许多年在各个厂…

当一个程序员一天被打扰 10 次,后果很严重!

在公众印象中&#xff0c;程序员很忙&#xff0c;没错&#xff01;不过他们忙碌的原因也许并不只是代码&#xff0c;更多因素应归功于这一次又一次的打断&#xff01;以下是网上查到的一些信息一个程序员被打搅后&#xff0c;他需要10-15分钟的时间才能重新恢复到之前的编程状态…

Chapter 2 Open Book——10

I sent that, and began again. 我发送了它&#xff0c;然后又一次重新开始写了。 Mom,Everything is great. Of course its raining. I was waiting for something to write about. School isnt bad, just a little repetitive. I met somenice kids who sit by me at lunch. …

“妈,我今年过年不回家了 !” 真相竟然是...

为什么越来越多年轻人宁愿选择大冷天一个人在外面待着&#xff0c;也不敢回家过年了&#xff1f;我想&#xff0c;无非就是因为那些在过年才会“凸显”的压力。学历优劣、职位高低、薪资水平、婚恋生育&#xff0c;这些本属于隐私范畴的事情&#xff0c;却经常在过年大庭广众之…

Windows 10 无法调节亮度的解决办法

我的笔记本在更新完14393后开始的一段时间内是可以正常调节亮度的&#xff0c;但是后来就莫名奇妙地不能调节亮度了&#xff0c;而且电源选项里的亮度调节滚动条也不见了。网上查了很多方法&#xff0c;诸如修改注册表、更新驱动之类的都试过&#xff0c;依然不能解决。后来在知…

有钱任性把冰山搬回家,真有富豪计划这样干!

从小到大我听过吹牛逼的话确实不少&#xff0c;大多数吹牛逼的话听完过后就忘了&#xff0c;但是有两件事情让我到现在还记忆尤深。为什么呢&#xff1f;因为这两个计划简直太宏伟了&#xff0c;是史诗级世界级的大项目&#xff0c;看到第一个大设想的时候&#xff0c;幼小的我…