在上一节里面，成功获取json-server模拟后端接口
https://www.jianshu.com/p/920d73fc32de
准备工作，先打开cmd，运行以上文章里内容：
现在要对这些接口进行增删改查操作，先写增删改查的按钮，进行点击事件 的操作。
<button type="button" class="add">添加</button>
<button type="button" class="delete">删除</button>
<button type="button" class="edit">修改</button>
<button type="button" class="serch">查询</button>
1：请求数据
//请求用户数据
$.ajax({
type:"GET",
url:"http://localhost:3000/users",
dataType:"json",
success:function (data) {
console.log(data, '请求成功')
},
error:function (err) {
console.log(data, '请求失败')
}
});
2:增加数据
$(".add").click(function() {
var newData = {
"name": "新加数据",
"phone": "123456789",
"email": "11357097537@qq.com",
"age": "45",
"id": 5,
"companyId": 3
};
$.ajax({
type: "post",
url: "http://localhost:3000/users",
data: newData,
success: function(data) {
console.log(data, '请求成功')
},
error: function(data) {
console.log(data, '请求失败')
}
})
})
打开db.json数据，发现里面添加了一条数据
3:删除数据
删除id为2的这条数据
$(".delete").click(function() {
var delUserId=4;
$.ajax({
type:"DELETE",
url:"http://localhost:3000/users/"+delUserId,
dataType:"json",
success:function(data){
console.log(data)
alert("删除成功")
},
error:function(err){
console.error(err)
}
})
})
4:修改数据
$(".edit").click(function() {
var updateuser = {
"name": "王小婷要修改一下哦",
"phone": "123456789",
"email": "11357097537@qq.com",
"age": "20",
"id": 1,
"companyId": 1
};
$.ajax({
type: "PUT",
url: "http://localhost:3000/users/1",
data: updateuser,
success: function(data) {
console.log(data)
},
error: function(err) {
console.error(err)
}
})
})
5:查询数据
查询id=1的数据
$(".serch").click(function() {
//查询id=1
$.ajax({
type: "get",
url: "http://localhost:3000/users/1",
dataType: "json",
success: function(e) {
console.log(e, '请求成功')
},
error: function(e) {
console.log(e, '请求失败')
}
})
})
参考demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button type="button" class="add">添加</button>
<button type="button" class="delete">删除</button>
<button type="button" class="edit">修改</button>
<button type="button" class="serch">查询</button>
</body>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
//增加
$(".add").click(function() {
var newData = {
"name": "新加数据",
"phone": "123456789",
"email": "11357097537@qq.com",
"age": "45",
"id": 5,
"companyId": 3
};
$.ajax({
type: "post",
url: "http://localhost:3000/users",
data: newData,
success: function(data) {
console.log(data)
alert("添加成功")
},
error: function(data) {
console.log(data)
alert("已存在，不可重复添加")
}
})
})
//删除
$(".delete").click(function() {
var delUserId = 5;
$.ajax({
type: "DELETE",
url: "http://localhost:3000/users/" + delUserId,
dataType: "json",
success: function(data) {
console.log(data)
alert("删除成功")
},
error: function(err) {
alert("不可重复删除")
}
})
})
//修改
$(".edit").click(function() {
var updateuser = {
"name": "王小婷要修改一下哦",
"phone": "123456789",
"email": "11357097537@qq.com",
"age": "20",
"id": 1,
"companyId": 1
};
$.ajax({
type: "PUT",
url: "http://localhost:3000/users/1",
data: updateuser,
success: function(data) {
console.log(data)
alert("修改成功")
},
error: function(err) {
alert("修改失败")
}
})
})
//查询
$(".serch").click(function() {
//查询id=1
$.ajax({
type: "get",
url: "http://localhost:3000/users/1",
dataType: "json",
success: function(data) {
console.log(data)
alert("查询成功")
},
error: function(data) {
console.log(data, '请求失败')
alert("查询失败")
}
})
})
</script>
</html>
网友评论