一开始的代码：

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
        }
      }
    }
  }
}