如何基於Ajax請求的結果提交（或不提交）表單？

Question

我的網站上有一個表單，用戶可以在其中提交內容並獲得結果

<form accept-charset="UTF-8" action="/submit-stuff" data-remote="true" method="post">
<!-- various form fields -->
<input type="submit" value="Run Code" id="submit-button">
</form>

在將其信息提交到后端之前，我嘗試使用Javascript獲得結果。 如果可以得到結果，我return false在Javascript中return false以阻止表單提交。

$('#submit-button').click(function() {
   if(canGetResults()){
     //deal with submission and then
     return false;
   }
   //the button will work as usual if canGetResults is false or there's an error 
});

這個工作正常，但是現在我想嘗試通過另一個ajax請求獲取結果，並且僅在失敗時才提交給我的常規后端。 單擊按鈕后，我調用以下代碼：

$.post("http://example.com/submit-stuff", json, function(data) {
  //do stuff with data
});

但是，它是異步的（因此我無法從中返回結果），因此即使其他ajax嘗試失敗，代碼也將return false 。 我應該如何解決這個問題，使其僅在ajax嘗試失敗時才提交給我自己的后端？

我可以將$ .post更改為$ .ajax並使其同步，但是通常不建議這樣做。 另外，我可以在$.post回調中提交表單，但是應該如何從那里提交整個表單？ 如果出現錯誤或http://example.com/submit-stuff不起作用，它還會提交嗎？

Answer 1

您的提交處理程序應始終阻止表單提交。

然后，如果Ajax代碼返回OK，則應調用表單的submit()方法。 這將繞過提交處理程序並提交表單。

注：致電submit的DOM對象，而不是jQuery對象上。 jQuery習慣於從其包裝器觸發事件​​處理程序。

Answer 2

您可以在提交函數中綁定所有ajax請求，並在必要時調用.post()事件：

 $("form").submit(function(e){
     e.preventDefault(); // <-prevents normal submit behaviour

     //only post if your ajax request goes your way
     $.ajax(url,function(data){
       //argument to post or not
       if(data=="success"){ postForm(); }          
     }); 

 });

function postForm(){
    $.post(
      "/submit-stuff"
      ,$( "form" ).serialize()
      ,function(data){
         //your code after the post
      }); 
}

如果不想為postForm創建單獨的函數，則可以將其放在當前被調用的包裝器中。