javascript执行了多个

Question

首先我认为if和else块都已执行。在代码中添加了调试器后，我不知道为什么我的代码运行了不止一次。

function Submit(form) {
var timer_starttime = document.getElementById("timer_starttime");
var timer_finishtime = document.getElementById("timer_finishtime");
if (wait_s.reportValidity() && wait_m.reportValidity()) {
var xmlhttp = new XMLHttpRequest(); // new HttpRequest instance 
var theUrl = "/submit_program";
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//document.getElementById("ajax_res").innerHTML = this.responseText;
document.getElementById("success-alert").className = "alert alert-success alert-dismissible";
console.log(this.responseText);
console.log("if");
debugger;
} else {
document.getElementById("error-alert").className = "alert alert-danger alert-dismissible";
console.log("else");
}
};
xmlhttp.open("POST", theUrl);
xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xmlhttp.send(JSON.stringify({
"timer_finishtime": timer_finishtime.value,
"timer_starttime": timer_starttime.value
}));
}
return false;
}
console.log("end");

<form id="TimeForm" action="" method="POST">
...
<button type="submit" class="btn btn-primary" onclick="return Submit(this);">Save</button>

Answer 1

当您发送一个AJAX请求时，请求会经历许多状态。详细信息请参见XMLHttpRequest.readyState的文档。

onreadystatechange函数将在每次状态改变时被调用。因此，else块将在所有初始状态下重复执行。然后，当请求成功完成时，将执行if块。

您应该只检查最终状态4中的错误，而不是将所有其他状态视为错误。

function Submit(form) {
var timer_starttime = document.getElementById("timer_starttime");
var timer_finishtime = document.getElementById("timer_finishtime");
if (wait_s.reportValidity() && wait_m.reportValidity()) {
var xmlhttp = new XMLHttpRequest(); // new HttpRequest instance 
var theUrl = "/submit_program";
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {
//document.getElementById("ajax_res").innerHTML = this.responseText;
document.getElementById("success-alert").className = "alert alert-success alert-dismissible";
console.log(this.responseText);
console.log("if");
debugger;
} else {
document.getElementById("error-alert").className = "alert alert-danger alert-dismissible";
console.log("else");
}
}
};
xmlhttp.open("POST", theUrl);
xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xmlhttp.send(JSON.stringify({
"timer_finishtime": timer_finishtime.value,
"timer_starttime": timer_starttime.value
}));
}
return false;
}
console.log("end");

<form id="TimeForm" action="" method="POST">
...
<button type="submit" class="btn btn-primary" onclick="return Submit(this);">Save</button>