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

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

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

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

user内容：

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

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

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

    <button id="myget">getbutton>
    <button id="mypost">postbutton>
    <button id="myput">putbutton>
    <button id="mypatch">patchbutton>
    <button id="mydelete">deletebutton>
    <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>

 结果：

json原来的内容：

json文件内容的变化：

user内容变化：

 

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

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

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

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

xhr.send(`username=dd`)

• 完整代码：

    <button id="myget">getbutton>
    <button id="mypost">postbutton>
    <button id="myput">putbutton>
    <button id="mypatch">patchbutton>
    <button id="mydelete">deletebutton>
    <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>

结果：

user本来的内容：

修改后的内容：

 

3、delete请求方式：

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

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

• 完整代码： 

    <button id="myget">getbutton>
    <button id="mypost">postbutton>
    <button id="myput">putbutton>
    <button id="mypatch">patchbutton>
    <button id="mydelete">deletebutton>
    <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>

结果：

 user本来的内容：

 删除后的内容：