利用ajax操作本地自创的接口数据

1.启动本地服务器，找到自创的数据接口

打开终端，输入json-server .\test.json --watch

服务器正常启动，生成一个本地服务地址，但我们利用另外一个服务器，Preview on Web Server，这是vscode的一个扩展插件，很好用。

右击选择 vscode-preview-server:launch on browser,展示页面就可以对test.json文件进行相应的操作了

注：json.test文件是我们自己模拟的一个后端接口数据，后续的操作中只要将后端的接口地址更换就可以进行正常的数据传输了

2.ajax操作（增删改查）

 

（1）查找数据：GET方法

btn.onclick = function () {//get获取，得到所选文件里面的信息
            var xhr = new XMLHttpRequest()

            xhr.open("GET", "http://localhost:3000/users?username=张三")
            xhr.send()
            xhr.onload = function () {
                if (xhr.status == 200)
                    console.log(JSON.parse(xhr.responseText)); 

            }


        }

在端口地址后输入?username=张三可以对文档信息进行筛选，得到对应的信息

（2）插入数据 POST方法

btn1.onclick = function () {//post插入,在文件中插入信息，并且会自动生成id
            console.log(111);
            var xhr = new XMLHttpRequest()

            xhr.open("POST", "http://localhost:3000/users")


            xhr.onload = function () {
                if (/^2\d{2|$/.test(xhr.status))
                    console.log(JSON.parse(xhr.responseText));

            }
           /*  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
            xhr.send(`username=李四&age=51`)
        } */
        xhr.setRequestHeader("Content-Type", "application/json")
            xhr.send(JSON.stringify({
                "username":"王五",
                "age":18 
            }))
        }

（3）更新数据 ：PUT方法

btn2.onclick = function () {//put修改，会将所选的id里面的信息全部覆盖掉，
            console.log(111);
            var xhr = new XMLHttpRequest()

            xhr.open("PUT", "http://localhost:3000/users/r7oMpn1")


            xhr.onload = function () {
                if (/^2\d{2|$/.test(xhr.status))
                    console.log(JSON.parse(xhr.responseText));

            }
           /*  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
            xhr.send(`username=李四&age=51`)
        } */
        xhr.setRequestHeader("Content-Type", "application/json")
            xhr.send(JSON.stringify({
                "username":"wwww",
                "age":18 
            }))
        }

注：put方法会将插入位置的信息全部覆盖，变成新插入的信息

（4）更新信息：PATCH方法

btn3.onclick = function () {//patch修改，只会修改传入的信息，
            console.log(111);
            var xhr = new XMLHttpRequest()

            xhr.open("PATCH", "http://localhost:3000/users/r7oMpn1")


            xhr.onload = function () {
                if (/^2\d{2|$/.test(xhr.status))
                    console.log(JSON.parse(xhr.responseText));

            }
           /*  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
            xhr.send(`username=李四&age=51`)
        } */
        xhr.setRequestHeader("Content-Type", "application/json")
            xhr.send(JSON.stringify({
                "username":"我是patch",
                
            }))
        }

注：put方法只会更改对应的信息，传入哪个就会更改哪个，而不会全部更改

 

（5）数据删除：DELETE方法

btn4.onclick = function () {//delete删除，会将所选的id里面的信息全部删除，
            console.log(111);
            var xhr = new XMLHttpRequest()

            xhr.open("DELETE", "http://localhost:3000/users/r7oMpn1")


            xhr.onload = function () {
                if (/^2\d{2|$/.test(xhr.status))
                    console.log(JSON.parse(xhr.responseText));

            }
           /*  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
            xhr.send(`username=李四&age=51`)
        } */
        xhr.setRequestHeader("Content-Type", "application/json")
            xhr.send(JSON.stringify({
                "username":"wwww",
                "age":18 
            }))
        }

 

 

 

总结：从上面的代码可以看出，代码冗余非常多，很繁琐，代码量大，复用性不高，后续将会将相应的增删改查的操作封装成一个ajax方法，提高代码的复用性