確保ajax請求不會被多次觸發

我正在研究一個簡單的表單頁面，我在想如果有人多次單擊提交按鈕會發生什麼情況（因爲我的共享主機似乎在某個時候似乎很慢）。確保ajax請求不會被多次觸發

此外，櫃面有人想看看我的代碼

$.ajax({ 
    url: "submit.php", 
    type: 'POST', 
    data: form, 
    success: function (msg) { 
     $(".ressult").html("Thank You!"); 
    }, 
    error: function() { 
     $(".result").html("Error"); 
    } 
});

有沒有辦法讓它這樣用戶點擊一次後，就不會再直到第一次點擊完成運行呢？

謝謝

來源

2013-05-20 Matt

第一次點擊後禁用提交按鈕。 – NullPointerException

可能的重複http://stackoverflow.com/questions/16651772/how-do-you-stop-a-user-from-repeatedly-clicking-a-jquery-ajax-call – intuitivepixel

你有沒有考慮用裝載機圖像替換您的提交按鈕，執行查詢，然後重新添加一次查詢是否已經完成？

編輯：使用加載器圖像是一種普遍的「我正在做某事」指示器，但禁用該按鈕也將工作！

來源

2013-05-20 17:10:51

在進行ajax調用之前，您可以禁用提交按鈕。然後，如果需要，請在成功時啓用它。

來源

2013-05-20 17:10:55 eidsonator

使用布爾標誌

if (window.isRunning) return; 
window.isRunning = true; 
$.ajax({ 
      url:"submit.php", 
      type: 'POST', 
      data: form, 
      success: function (msg){     
       $(".ressult").html("Thank You!"); 
      }, 
      error: function(){ 
       $(".result").html("Error"); 
      }, 
      complete : function() { 
       window.isRunning = false; 
      } 
     });

來源

2013-05-20 17:11:08 epascarello

什麼是window.isRunning？ –

這是一個全局變量，在這裏看到更多的信息：http://stackoverflow.com/questions/11148997/window-variablename – Joe

@Joe感謝噸。 –

您可以使用jQuery的.one()功能：

(function handleSubmit() { 
    $('#submitBtn').one('click', function() { 
     var $result = $('.result'); 
     $.ajax({ 
      url: 'submit.php', 
      type: 'POST', 
      data: form, 
      success: function (msg) { 
       $result.html('Thank You!'); 
       handleSubmit(); // re-bind once. 
      }, 
      error: function() { 
       $result.html('Error'); 
      } 
     }); // End ajax() 
    }); // End one(click) 
}()); // End self-invoked handleSubmit()

* 編輯：*多個提交新增遞歸。

來源

2013-05-20 17:11:34 AlienWebguy

問題在於用戶想要該功能再次運行。 – epascarello

我解決了如何在原始答案中處理多個提交內容，但是在任何方面我都通過示例進行了更新。乾杯〜 – AlienWebguy

var $button = $(this); 
$button.prop('disabled', true); // disable the button 
$.ajax({ 
    url:"submit.php", 
    type: 'POST', 
    data: form, 
    success: function (msg){     
     $(".ressult").html("Thank You!"); 
    }, 
    error: function(){ 
     $(".result").html("Error"); 
    }, 
    complete: function() { 
     $button.prop('disabled', false); // enable it again 
    } 
});

來源

2013-05-20 17:11:45

確保ajax請求不會被多次觸發

回答

相關問題