停止表单请求，直到ajax请求完成

Question

在使用ajax进行一些编码时，我发现一个问题。以下是我的代码片段。

<script type="text/javascript"> 
    function xmlHttp(){ 
     if(window.XMLHttpRequest){ 
      xmlhttp = new XMLHttpRequest(); 
     } 
     else{ 
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     return xmlhttp; 
    } 

    function addData(a, b, c){ 
     xmlhttp = xmlHttp(); 
     xmlhttp.onreadystatechange = function(){ 
      if(xmlhttp.readyState==4 && xmlhttp.status==200){ 
       alert("Response : " + xmlhttp.responseText); 
      } 
     } 
     link = "test.php?a="+a+"&b="+b+"&c="+c; 
     xmlhttp.open("GET",link,true); 
     xmlhttp.send(); 
    } 
</script> 
<center> 
    <form method="POST" action="?page=search.php"> 
     <table width="400" border="1"> 
      <tr> 
       <td align="right"><button onclick="return addData(1,2,3);">Add data</button></td> 
      </tr> 
     </table> 
    </form> 
</center> 

点击按钮，ajax请求调用。在Ajax请求完成之前，发生提交。在完成ajax请求之前应该等待表单提交。

我发现此链接与我的相似。 Sending an Ajax request before form submit

这样做，我的其他表单不会发送（其他输入类型）。 POST数组保持空白。

Answer 1

如果您希望用户在AJAX请求完成之前不应提交表单，则只需在发送请求时禁用表单，并在收到响应后启用它。您可能还会显示一个loading ... gif来告诉用户正在发生的事情。

更新：你可以这样写。你需要做的是用提交按钮的ID替换SubmitBtnId。

<script type="text/javascript"> 
    function xmlHttp(){ 
     if(window.XMLHttpRequest){ 
      xmlhttp = new XMLHttpRequest(); 
     } 
     else{ 
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     return xmlhttp; 
    } 

    function addData(a, b, c){ 
     xmlhttp = xmlHttp(); 
     xmlhttp.onreadystatechange = function(){ 
      if(xmlhttp.readyState==4 && xmlhttp.status==200){ 
       alert("Response : " + xmlhttp.responseText); 
       Document.getElementById('SubmitBtnId').disabled=false; 
      } 
     } 
     link = "test.php?a="+a+"&b="+b+"&c="+c; 
     Document.getElementById('SubmitBtnId').disabled=true; 
     xmlhttp.open("GET",link,true); 
     xmlhttp.send(); 
    } 
</script>