停止發送沒有頁面刷新的Ajax請求

Question

我創建了一個Ajax請求，它將一些數據發送到按鈕點擊事件的php文件。現在提交數據後，我想限制ajax請求不要通過單擊按鈕一次又一次地發送數據。它僅在頁面刷新時發送數據（意味着在頁面加載時發送一次數據）。我怎樣才能阻止這樣的請求。我的AJAX代碼如下：

$(".button").click(function (e) { 
    e.preventDefault(); 
    $.ajax({ 
     type: 'post', 
     cache: false, 
     url: 'my/ajaxrequest.php', 
     data: { 
      result: 'hi test data' 
     }, 
     success: function (resp) { 
      $("#result").html(resp); 
     } 
    }); 
}); 

Answer 1

通過.one()

只需更換.click()這將防止多次點擊您的$.ajax()再次運行。

$(".button").one('click', function(e) { 
    e.preventDefault(); 
    $.ajax({ ... }); 
} 

如果您需要執行只頁面加載後，你可以簡單地移動從單擊處理$.ajax()調用到文檔準備功能：

$(function() { 
    $.ajax({ 
     type: 'post', 
     cache: false , 
     url: 'my/ajaxrequest.php', 
     data: { result : 'hi test data' }, 
     success: function(resp) { 
      $("#result").html(resp); 
     } 
    }); 
}); 

Answer 2

您需要從按鈕移除click eventHandler成功完成Ajax響應後。

例

$("#Btn").unbind("click");

OR

$.off("click", "input:button", foo);

Answer 3

更深入的分析可以限制AJAX調用，以一個成功的響應（即是狀態200 & &做到了返回你正在尋找的結果？如果是這樣，您可以將此代碼放入XHR函數的success函數中：requestLog.sendStatus = true;如果您只希望允許ajax請求初始化一次，則將此（requestLog.sendStatus = true;）置於e.preventDefault之後如果您只想允許ajax調用如果它們實際上是成功的響應則阻止，然後將requestLog.sendStatus = true放入ajax對象的success函數中。

var requestLog = {}; 
    requestLog.sendStatus = false; 

$(".button").click(function(e) { 
    e.preventDefault(); 
    if(requestLog.sendStatus) return; 
    /* requestLog.sendStatus = true; */ 
    $.ajax({ 
     type: 'post', 
     cache: false , 
     url: 'my/ajaxrequest.php', 
     data: { result : 'hi test data' }, 
     success: function(resp) { 
      $("#result").html(resp); 
      requestLog.sendStatus = true; 
     } 
    }); 
}); 

你想在頁面加載只運行一次嗎？試試這個：

(function() { 
    $.ajax({ 
    type: 'post', 
    cache: false , 
    url: 'my/ajaxrequest.php', 
    data: { result : 'hi test data' }, 
    success: function(resp) { 
      $("#result").html(resp); 
    } 
    }); 
}()); 

Answer 4

就修改如下：

$(".button").click(function(e) { 
     e.preventDefault(); 
$(".button").unbind('click'); //unbind the bound event after one click 
    $.ajax({ 
     type: 'post', 
     cache: false , 
     url: 'my/ajaxrequest.php', 
     data: { result : 'hi test data' }, 
     success: function(resp) { 
     $("#result").html(resp); 

     } 

     }); 

    });