POST 请求因 XMLHttpRequest() 失败，但可与 Postman 一起使用答案

【问题标题】：POST request fails with XMLHttpRequest(), yet works with PostmanPOST 请求因 XMLHttpRequest() 失败，但可与 Postman 一起使用
【发布时间】：2019-01-04 00:36:01
【问题描述】：

我尝试向我的本地主机服务器发送 POST 请求。该请求通过 Postman 完美运行，但在使用 XMLHttpRequest() 时似乎不起作用。我使用 Chrome 的开发人员工具调试了 javaScript，XMLHttpRequest() 和 Postman 发送的 JSON 正文是相同的。我不知道为什么 XMLHttpRequest() 失败了，但 Postman 的请求却成功了。

我在下面添加了我的 JavaScript 和 HTML 代码中最基本的 sn-ps。我还制作了一个 CSS 文件来创建 UI（未显示）。

var signInUrl = 'http://0.0.0.0:8080/user/sign-in';
var signOutUrl = 'http://0.0.0.0:8080/user/sign-out';

function sendEntry(form, signType) {
  var jsonString = serializeEntry(form);
  var httpRequest = new XMLHttpRequest();

  var url = '';
  if (signType === 'signIn') {
    url += signInUrl;
  } else {
    url += signOutUrl;
  }

  httpRequest.open('POST', url, true); // true means asynchronous
  httpRequest.setRequestHeader('Content-type', 'application/json');
  httpRequest.send(jsonString);
}

function serializeEntry(form) {
  var date = new Date();
  var timestamp = date.getTime(); // milliseconds
  var jsonObject = {
    'userId': form.userId.value,
    'time': timestamp
  };
  return JSON.stringify(jsonObject);
}

  <form name="signInOrOut" action="index.html" method="post">
    <div class="signInOrOut">
      <input type="text" name="userId" placeholder="Enter employee ID">
      <br>
      <button id="signInButton" type="submit" name="signInButton" onclick="sendEntry(this.form, 'signIn')">Sign In</button>
      <button id="signOutButton" type="submit" name="signOutButton" onclick="sendEntry(this.form, 'signOut')">Sign Out</button>
    </div>
  </form>

Successful Postman request

【问题讨论】：

你遇到了什么错误？
The HTML5 placeholder attribute is not a substitute for the label element
@A_01 奇怪的是我在服务器或客户端没有收到任何错误。此外，我在 javaScript 中使用的 URL 与 Postman 中的 URL 完全相同。

标签： javascript html post xmlhttprequest postman

【解决方案1】：

您在提交表单时触发 Ajax 请求。

浏览器准备发送 Ajax 请求。然后表单提交。浏览器导航离开当前页面。 Ajax 请求所属的 JavaScript 环境被破坏。然后取消 Ajax 请求。

要么：

取消表单提交
不要触发 Ajax 请求以响应单击提交按钮

【讨论】：