今天学习了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♪(･ω･)ﾉ。