ajax通过post方式和后端建立连接传输数据

1、前后端连接请求方式： 

• 请求方式分为：get、post、put、patch、delete
• get方式：偏向获取数据；
• post方式： 偏向向后端提交数据；
• put方式：偏向更新（全部更新）；
• patch方式：偏向部分修改；
• delete方式：偏向删除信息；

2、get方式和后端交互的步骤：

3、post方式 

因为我们要向后端要数据，但是我们现在没有后端，所以我们就自己创建一个json文件，基于这个json文件来创建一个后端模拟接口，和后端要数据，这个数据就是这个json文件，创建方法见：

基于json文件创建后端模拟接口_陌一一的博客-CSDN博客

现在这个json文件就是模拟是后端给的数据，用post请求方式的话；

要实现的需求是：用post方式向后端接口：http://localhost:3000/user发送数据，json文件现在模拟的是数据库，当我们给后端发送一条数据时，后端把它存在数据库中（也就是这里的json文件），然后后端返回json格式的数据给我们；

post方式因为是要向后端发送数据的，所以post请求是携带信息的；

json文件内容（数据库现有内容）：

 

post较get方式不一样的地方是：

• post方式是携带发送给后端的信息的，也就是xhr.send（发送给后端的信息） ；
• 而且要说明发送给后端的信息是什么格式的；
• 发送的信息格式分为：表单格式、json格式；
• 表单格式代码：（信息格式：键=值&键=值）

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
xhr.send(`username=yiyi&password=123`)

• 前端要发送给后端的数据是： username=yiyi&password=123；
• json格式代码：（信息格式：‘’键”：“值”）

xhr.setRequestHeader("Content-Type","application/json")
xhr.send(JSON.stringify({
     username:"qingqing",
     password:"789"
}))

• 前端要发送给后端的数据是： JSON.stringify({username:"qingqing",password:"789"})

 完整代码：

    
    
    
    


    get
    post
    put
    patch
    delete
    

页面显示：

• 当我们点击post按钮，就向后端提交了一条数据，数据库的信息就会增加一条：

数据库结果：  

• 原来user里有两条数据，现在有三条，，，
• 控制台显示：

 

出现的问题：

当我们提交数据以后，发现后端返回的数据并没有显示在“控制台”上，我们上面的：console.log(JSON.parse(xhr.responseText))代码代表的是让返回的数据打印的控制台上，但是控制台上并没有，图示：

 

原因有三，这三个条件都要具备才可以：

• 原因一： 这条前后端的连接，这个状态不是200了，之前说200~299都是返回的数据是正常的，一般是200，所以我们上面的代码判断条件：“xhr.status === 200”就不对了，可以直接换成正则表达式的写法：“/^2\d{2}$/.test(xhr.status)”； 

代码：

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

 

• 原因二：你用的服务器是live-server，live-server和json-server不对付，所以要换成web-server来运行代码；

      （1）怎么查看是在live-server上运行的：

     运行代码时，右键出现 “Open with Live  Server”，你点击这个选项打开的网页就是在live-server       服务器上运行的，图示：

  （2）如何换成web-server服务器，下载插件：“Preview on Web Server”，图示：

  （3）安装完以后，重启VScode，然后再运行代码，右键会出现“**”（此处省略，也太长了吧），图示：

  （4）没有出现的话，返回到插件的页面，按一下：“Ctrl+Shift+r”，意为启动插件；关闭插件，按“Ctrl+Shift+s” ；

• 原因三：要在当前的Web Server下运行后端接口：

完整代码：

    
    
    
    


    get
    post
    put
    patch
    delete
    

结果：