如何防止瀏覽器重試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>