如何防止浏览器重试POST请求失败（并检查Internet连接）？

Question

我有一个用于移动用户的网站，用于检查每个POST请求的连接情况。如果没有互联网连接，我会提示用户输入错误信息。另外，我希望有一个过渡效果，表明表单正在提交。

我有以下代码：

var progress = 0; 

$('div').on('submit', 'form', function (e) { 
    var thisform = this; 

    if (progress === 1) { 

     // check internet connection  
     var connection = hostReachable(); 

     if (!connection) { 
      alert('No connection'); 
      setTimeout(function() { // re-allow submission after 8000 ms (not immediately to avoid browser retry) 
       progress = 0; 
      }, 8000); 
      return false; 
     } 

     return true; 
    } 

    e.preventDefault(); 
    e.stopPropagation(); 

    if (progress === 0) { // first submit 

     // updated progress value    
     progress = 1; 

     //form transition    
     $('.spinner').show('fast', function() { 
      $('.pagecontent').fadeOut('fast'); 
      thisform.submit(); 
     }); 
    } else { 
     // prevent submit retries when no connectivity 
     return false; 
    } 
}); 

其中hostReachable()是用于使用XHR请求检查连通性的功能。

现在的问题是thisform.submit();之后表单提交事件似乎没有再次触发。因此if (progress === 1)内的代码永远不会运行。

我的代码有什么问题？谢谢！

Answer 1

thisform.submit()不会触发表单提交事件处理程序，因为如果你考虑它将是一个无限循环。你需要做的是以编程方式点击按钮来触发表单提交事件。

$('#submit-button').trigger('click'); 

演示：

var progress = 0; 
 

 
$('div').on('submit', 'form', function (e) { 
 
    var thisform = this; 
 

 
    if (progress === 1) { 
 

 
     // check internet connection  
 
     var connection = hostReachable(); 
 

 
     if (!connection) { 
 
      alert('No connection'); 
 
      setTimeout(function() { // re-allow submission after 8000 ms (not immediately to avoid browser retry) 
 
       progress = 0; 
 
      }, 8000); 
 
      return false; 
 
     } 
 

 
     return true; 
 
    } 
 

 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 

 
    if (progress === 0) { // first submit 
 

 
     // updated progress value    
 
     progress = 1; 
 

 
     //form transition    
 
     $('.spinner').show('fast', function() { 
 
      $('.pagecontent').fadeOut('fast'); 
 
      $('#submit-button').trigger('click'); 
 
     }); 
 

 
    } else { 
 
     // prevent submit retries when no connectivity 
 
     return false; 
 
    } 
 
}); 
 

 
function hostReachable() {}

.spinner { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <form> 
 
     <div class="spinner">loading</div> 
 
     <input type="submit" value="submit" id="submit-button"/> 
 
    </form> 
 
</div>