Question

我尝试将POST请求发送到本地主机服务器。该请求可以通过Postman完美地工作，但是在使用XMLHttpRequest（）时似乎不起作用。我使用Chrome的开发人员工具调试了JavaScript，并且XMLHttpRequest（）和Postman发送的JSON正文是相同的。我不知道为什么XMLHttpRequest（）失败了，而Postman的请求却成功了。

我在下面添加了我的JavaScript和HTML代码的最基本片段。我还制作了一个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

Answer 1

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

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

要么：

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

POST请求的XMLHttpRequest（）失败，但可与Postman一起使用

1 个答案: