POST请求使用XMLHttpRequest()失败，但可以使用Postman

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>

成功的邮差请求

Answer 1

提交表单时触发Ajax请求。

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

任一：

• 取消表单提交
• 不要在点击submit按钮时触发Ajax请求