通过XMLHttpRequest提交HTML表单数据失败问题排查

我帮你梳理了一下，核心问题大概率是表单的默认提交行为没有被阻止，这才导致从表单获取数据时请求失败，而硬编码场景下请求能正常工作。

两种方式的核心区别 #

当你通过点击表单的提交按钮触发loginResults()时，浏览器会同时做两件事：

1. 执行你写的JS代码，发起XMLHttpRequest请求
2. 执行表单的默认提交行为——发起一个传统的POST请求并刷新页面

这时候你的XHR请求还没来得及完成就被页面刷新中断了，看起来像是请求完全失败；而硬编码时，如果你是直接在控制台调用loginResults()（而非通过提交按钮触发），就不会触发表单的默认提交，XHR请求能完整走完生命周期，所以能正常得到响应。

虽然你看到的请求payload内容一致，但两者的请求生命周期完全不同：一个被页面刷新强制中断，一个完整执行到服务器响应。

修复方案 #

1. 调整JS逻辑，阻止默认行为 #

修改你的loginResults()函数，添加阻止默认行为的逻辑，同时修复几个容易踩坑的细节：

function loginResults(event) {
  // 阻止表单默认提交，避免页面刷新中断XHR请求
  event.preventDefault();

  var loginUser = document.getElementById("username").value;
  var loginPass = document.getElementById("password").value;

  // 将XHR实例放在函数内部，避免多次点击复用同一个实例导致请求冲突
  var xhr = new XMLHttpRequest();
  xhr.open("post", "https://test.com/api/login/");
  
  // 显式设置表单数据的Content-Type，确保服务器能正确解析
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

  // 对输入内容编码，防止特殊字符（如&、空格）破坏数据格式
  var loginData = "username=" + encodeURIComponent(loginUser) + "&password=" + encodeURIComponent(loginPass);
  xhr.send(loginData);

  xhr.addEventListener("readystatechange", function processRequest() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      var response = JSON.parse(xhr.responseText);
      console.log(response);
    }
  }, false);
}

2. 同步修改HTML表单事件 #

需要把事件对象传递给函数，确保preventDefault()能生效：

<form name="isLogin" id="isLogin" onSubmit="loginResults(event)" method="post">
  <div class="container">
    <label for="username"><b>Email</b></label>
    <input type="text" id="username" placeholder="Enter Email" name="username" required>
    <label for="password"><b>Password</b></label>
    <input type="password" id="password" placeholder="Enter Password" name="password" required>
    <button id="submitLogin" type="submit">Login</button>
  </div>
</form>

额外注意点 #

• 编码问题：硬编码的内容没有特殊字符，所以不会出问题，但用户输入可能包含&、空格、中文等特殊字符，必须用encodeURIComponent()编码，否则会破坏表单数据的格式。
• XHR实例作用域：之前你把xhr放在全局作用域，多次点击提交按钮会复用同一个XHR实例，导致前一次请求被覆盖，放在函数内部能避免这个问题。
• Content-Type头：虽然部分浏览器会自动添加，但显式设置application/x-www-form-urlencoded能确保服务器按照表单格式解析你的请求数据。

内容的提问来源于stack exchange，提问作者Puddin