代码之家 › 专栏 › 技术社区 › Mehmet

javascript执行了多个

ajax html javascript

Mehmet · 技术社区 · 2 年前

首先,我考虑执行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>

1 回复 | 直到 2 年前

Barmar 2 年前

当您发送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>