1. Dotnet9首页
  2. 大前端
  3. 前端语言
  4. JavaScript

json-server对数据进行增删改查操作

22

在上一节里面,成功获取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, '请求失败')
            }
        }); 
json-server对数据进行增删改查操作
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, '请求失败')
        }
    })

})
json-server对数据进行增删改查操作

打开db.json数据,发现里面添加了一条数据

json-server对数据进行增删改查操作
3:删除数据

删除id为2的这条数据

json-server对数据进行增删改查操作
$(".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)
        }
    })

})
json-server对数据进行增删改查操作
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, '请求失败')
                }
            })
        })
json-server对数据进行增删改查操作

参考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>

作者:祈澈菇凉
链接:https://www.jianshu.com/p/a05803b0d42d
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

原文出处:简书【祈澈菇凉】

原文链接:https://www.jianshu.com/p/a05803b0d42d

本文观点不代表Dotnet9立场,转载请联系原作者。

发表评论

登录后才能评论