json-server对数据进行增删改查操作
- 2019 年 11 月 20 日
- 筆記
在上一节里面，成功获取json-server模拟后端接口 准备工作，先打开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": "[email protected]", "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": "[email protected]", "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": "[email protected]", "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": "[email protected]", "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>
