ajax中的和后端交互的put、patch、delete请求-Toy模板网

这篇具有很好参考价值的文章主要介绍了ajax中的和后端交互的put、patch、delete请求。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、向后端发送一个put请求，请求修改数据：

重点：修改谁、修改成什么：
修改谁：修改user下第一个：

xhr.open("PUT","http://localhost:3000/user/1")

user内容：

ajax中的和后端交互的put、patch、delete请求

修改成什么：修改成“username=hhh&password=575”

xhr.send(`username=hhh&password=575`)

完整代码：（只复制了body里面的代码）

<body>
    <button id="myget">get</button>
    <button id="mypost">post</button>
    <button id="myput">put</button>
    <button id="mypatch">patch</button>
    <button id="mydelete">delete</button>
    <script>
        myput.onclick = function(){
            var xhr = new XMLHttpRequest()
            xhr.open("PUT","http://localhost:3000/user/1")

            xhr.onload = function(){
                if(/^2\d{2}$/.test(xhr.status)){
                    console.log(JSON.parse(xhr.responseText))
                }else if(xhr.status === 404){
                    console.log("页面加载错误")
                }
            }

            //表单格式
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
            xhr.send(`username=hhh&password=575`)
            
            //json格式
            // xhr.setRequestHeader("Content-Type","application/json")
            // xhr.send(JSON.stringify({
            //     username:"hhh",
            //     password:"575"
            // }))
        }
    </script>
</body>

结果：

ajax中的和后端交互的put、patch、delete请求

json原来的内容：

ajax中的和后端交互的put、patch、delete请求

json文件内容的变化：

ajax中的和后端交互的put、patch、delete请求

user内容变化：

ajax中的和后端交互的put、patch、delete请求

文章来源地址https://www.toymoban.com/news/detail-461537.html

2、向后端发送一个patch请求，请求修改部分数据：

和put的区别是，put的全部修改，patch是部分修改；
要修改谁：修改user中id为2的

xhr.open("PATCH","http://localhost:3000/user/2")

修改成什么内容：修改username的值为“dd”

xhr.send(`username=dd`)

完整代码：

<body>
    <button id="myget">get</button>
    <button id="mypost">post</button>
    <button id="myput">put</button>
    <button id="mypatch">patch</button>
    <button id="mydelete">delete</button>
    <script>
        myput.onclick = function(){
            var xhr = new XMLHttpRequest()
            xhr.open("PATCH","http://localhost:3000/user/2")

            xhr.onload = function(){
                if(/^2\d{2}$/.test(xhr.status)){
                    console.log(JSON.parse(xhr.responseText))
                }else if(xhr.status === 404){
                    console.log("页面加载错误")
                }
            }

            //表单格式
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
            xhr.send(`username=dd`)
            
        }
    </script>
</body>

结果：

user本来的内容：

ajax中的和后端交互的put、patch、delete请求

修改后的内容：

ajax中的和后端交互的put、patch、delete请求

3、delete请求方式：

要删什么：删user下的第2条数据

xhr.open("DELETE","http://localhost:3000/user/2")

完整代码：

<body>
    <button id="myget">get</button>
    <button id="mypost">post</button>
    <button id="myput">put</button>
    <button id="mypatch">patch</button>
    <button id="mydelete">delete</button>
    <script>
        myput.onclick = function(){
            var xhr = new XMLHttpRequest()
            xhr.open("DELETE","http://localhost:3000/user/2")

            xhr.onload = function(){
                if(/^2\d{2}$/.test(xhr.status)){
                    console.log(JSON.parse(xhr.responseText))
                }else if(xhr.status === 404){
                    console.log("页面加载错误")
                }
            }
            xhr.send()
        }
    </script>
</body>

结果：

user本来的内容：

ajax中的和后端交互的put、patch、delete请求