[英]javascript executed more than one
at the first I consider both if and else block executed.首先,我考虑执行 if 和 else 块。 After added debugger to code, I don't know why my code run more than once.将调试器添加到代码后,我不知道为什么我的代码运行了多次。
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>
When you send an AJAX request, the request goes through a number of states.当您发送 AJAX 请求时,该请求会经历多种状态。 See the documentation of XMLHttpRequest.readyState
for the full details.有关完整详细信息,请参阅XMLHttpRequest.readyState
的文档。
The onreadystatechange
function will be called each time the state changes.每次状态改变时都会调用onreadystatechange
函数。 So your else
block will be executed repeatedly for all the initial states.因此,您的else
块将针对所有初始状态重复执行。 Then when the request completes successfully, the if
block will be executed.然后当请求成功完成时,将执行if
块。
You should only check for an error in the final state 4
, not treat all the other states as errors.您应该只检查最终状态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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.