防止多個表單提交。有沒有簡單的解決方案

Question

我不知道如何防止在Ajax中的多個表單提交。現在我在網上看到的是非工作解決方案或真正的龐然大物（對於這樣一個微觀任務，大量的曲線代碼，爲什麼？）。我現在已經是這樣的代碼：

$('#btn').click(function(){ 
    $('#form').submit(function(e){ 
    var postData = $(this).serializeArray(), 
    formURL = $(this).attr('action'); 
    $.ajax({ 
     url:formURL, 
     type:'POST', 
     data:postData, 
     success:function(data, textStatus, jqXHR){ 

     }, 
     error:function(jqXHR, textStatus, errorThrown){ 

     } 
    }); 
    e.preventDefault(); 
    }); 
}); 

我希望能有一個一杆完美的解決方案，像一些神祕的屬性或函數調用。

Answer 1

我最常做的是禁止提交的點擊，以防止更多的點擊，當阿賈克斯完成重新啓用它：

$('#btn').click(function(){ 
    $(this).prop('disabled', true) // disable submit to prevent multiple sends 
    $('#form').submit(function(e){ 
    var postData = $(this).serializeArray(), 
    formURL = $(this).attr('action'); 
    $.ajax({ 
     url:formURL, 
     type:'POST', 
     data:postData, 
     success:function(data, textStatus, jqXHR){ 

     }, 
     error:function(jqXHR, textStatus, errorThrown){ 

     }, 
     always:function(){ // it its a success or a fail, we want to re-enable it 
      $(this).prop('disabled', false) 
     } 
    }); 
    e.preventDefault(); 
    }); 
}); 

Answer 2

嘗試以下操作：

$('#btn').click(function(){ 
    $(this).prop("disabled",true); 
    $('#form').submit(function(e){ 
    var postData = $(this).serializeArray(), 
    formURL = $(this).attr('action'); 
    $.ajax({ 
     url:formURL, 
     type:'POST', 
     data:postData, 
     success:function(data, textStatus, jqXHR){ 
       $('#btn').prop("disabled",false); 
     }, 
     error:function(jqXHR, textStatus, errorThrown){ 
       //handle error 
     } 
    }); 
    e.preventDefault(); 
    }); 
}); 

Answer 3

$('#form').submit(function(e){ 
$('#btn').attr('disabled', 'disabled'); 
var postData = $(this).serializeArray(), 
formURL = $(this).attr('action'); 
$.ajax({ 
    url:formURL, 
    type:'POST', 
    data:postData, 
    success:function(data, textStatus, jqXHR){ 

    }, 
    error:function(jqXHR, textStatus, errorThrown){ 

    }, 
    complete: function() { 
     $('#btn').removeAttr('disabled'); 
    } 

}); 

e.preventDefault(); 
});