一开始的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
regBtn.onclick = function () {
let userjson = {
// 这里的数据格式不对
"id": input3.value,
"password": input4.value
};

const xhr = new XMLHttpRequest();
xhr.open('post', '/login');
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
xhr.send(userjson);

xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
console.log(xhr.response);
//之后要根据不同的response进行不同的操作
}
}
}
}

主要修改两个地方:

  • 请求头
  • 数据格式

修改后:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
regBtn.onclick = function () {
const xhr = new XMLHttpRequest();

xhr.open('post', '/login');

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// 修改请求头(没有深入理解)

xhr.send(`id=${input3.value}&password=${input4.value}`);
// 在不配置的情况下,原生ajax发送post请求必须用这个数据格式:'a=xxx&b=xxx&c=xxx'

xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
let data = JSON.parse(xhr.response);
if (data.status == 200) {
// do something
}
else if (data.status == 499) {
// do something
}
}
}
}
}