如何避免多個AJAX調用？

Question

我通過AJAX使用下面的代碼提交表單：

$('form').submit(function(e) { 

    $.ajax({ 
     type: 'POST', 
     url: ajax_url, 
     dataType: 'json', 
     data: { 
      'action': 'my_action', 
      'str': $('form').serialize() 
     }, 
     success: function(data) { 
      // Do something here. 
     }, 
     error: function(data) { 
      // Do something here. 
     } 
    }); 
    return false; 
}); 

背景

我的PHP處理程序執行各種任務，然後發回一個響應。然後，我可以在成功或錯誤功能中使用data做一些事情。

我的問題

當用戶雙擊窗體上的提交按鈕，兩名AJAX調用發生導致我的PHP處理程序中的代碼執行兩次。

我的問題

我怎樣才能避免我的代碼被執行，如果在提交用戶雙擊兩次？

Answer 1

當AJAX呼叫回來時，在第一次點擊時禁用提交按鈕並重新啓用它。

例如：

$('form').submit(function(e) { 
    var $form = $(this); 
    $form.find('submit').attr('disabled', true); 
    $.ajax({ 
     type: 'POST', 
     url: ajax_url, 
     dataType: 'json', 
     data: { 
      'action': 'my_action', 
      'str': $('form').serialize() 
     }, 
     complete: function() { 
      $form.find('submit').removeAttr('disabled'); 
     }, 
     success: function(data) { 
      // Do something here. 
     }, 
     error: function(data) { 
      // Do something here. 
     } 
    }); 
    return false; 
}); 

Answer 2

只需添加一些有控制變量：

var isSubmitting = false; 

$('form').submit(function(e) { 
    if(isSubmitting) { 
     return; 
    } 
    isSubmitting = true; 
    $.ajax({ 
     type: 'POST', 
     url: ajax_url, 
     dataType: 'json', 
     data: { 
      'action': 'my_action', 
      'str': $('form').serialize() 
     }, 
     success: function(data) { 
      isSubmitting = false; 
      // Do something here. 
     }, 
      error: function(data) { 
      isSubmitting = false; 
      // Do something here. 
     } 
    }); 
    return false; 
}); 

Answer 3

只是隱藏和顯示上提交的提交按鈕。

$('form').submit(function(e) { 
    $('#my_button').hide(); 
    $.ajax({ 
    type: 'POST', 
    url: ajax_url, 
    dataType: 'json', 
    data: { 
     'action': 'my_action', 
     'str': $('form').serialize() 
    }, 
    success: function(data) { 
     // Do something here. 
    }, 
    error: function(data) { 
     // Do something here. 
    }, 
    complete: function(){ 
     $('#my_button').show(); 
    } 
}); 
return false; 

}）;