如何避免多个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; 

}）;