原生ajax POST请求报错400 ( Bad Request )

原因1

如果使用了原生ajax请求数据且请求类型是POST，但是运行的时候报错400，那么代表没有设置请求头，需要在xhr.open()方法下设置请求头

原因2

没传递参数,后端需要传参数才能访问到

xhr.setRequestHeader('Content-type', 'application/json');  //参数意思是:请求的数据类型

2-1)  var parse = {
	后端字段名: 获取要传的数据,
	userName:  name;		//前面userName是后端提供的固定写法,必须这么写; 后面name是要传递的参数(要把名字传给后端)
}
2-2)  xhr.send(发送参数)		//POST请求在send方法发送参数,需要提前将多个参数放在对象中(例如上面parse对象),再把对象转成JSON.stringify格式放在send方法中

原生ajax(POST请求)和原生js

原生ajax的POST请求共5步骤,比GET请求多一个步骤(请求头)

步骤:

1. 创建xhr对象
2. 通过open()方法建立连接
3. 设置请求头
4. onload请求成功的回调函数
5. send()方法发送请求

document.getElementById("btnLogin").onclick = function(){
      var username = document.getElementById("userName").value;
      var password = document.getElementById("password").value;
      var result = document.getElementById("result");

      var parse = {                     //1、处理请求参数
        userName: username,
        password: password
      }

      var xhr = new XMLHttpRequest();
      xhr.open("POST", api);
      xhr.setRequestHeader("Content-type", "application/json");   //2、POST请求必须设置请求头
      xhr.onload = function(){
        if(xhr.responseText==0){
          result.innerText = '验证通过'
        } else if(xhr.responseText==1){
          result.innerText = '密码错误'
        } else if(xhr.responseText==2){
          result.innerText = '用户名不存在'

        } else {
          result.innerText = 'shurubudi'

        }
      }
      xhr.send(JSON.stringify(parse)); //发送请求 - 3、POST请求的参数放在send中     
    }