原因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请求多一个步骤(请求头)
步骤:
- 创建xhr对象
- 通过open()方法建立连接
- 设置请求头
- onload请求成功的回调函数
- 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中
}