여러 AJAX 호출을 피하는 방법은 무엇입니까?

Question

나는 아래의 코드를 사용하여 AJAX를 통해 양식을 제출하고 있습니다 :

내 PHP 처리기가 다양한 작업을 수행 한 후 응답을 다시 전송

$('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; 
}); 

배경입니다. 그런 다음 성공 또는 오류 기능 중 하나에서 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; 

});