如何防止ajax請求？

Question

我有以下情況：頁面顯示一組項目，當用戶點擊項目時，通過ajax請求加載項目詳細信息。我想要做的是防止進一步點擊的Ajax請求，因爲信息已經加載。

我使用jQuery和Rails 3和我的代碼看起來是這樣的：

# view 
- @items.each do |item| 
    .item 
    = link_to item.name, item_path(item), :remote => true 

// js 
$(function(){ 
    $('.item').bind('ajax:success', function(xhr, data, status){ 
    ... 
    }); 

    $('.item').bind('ajax:before', function(xhr){ 
    if (...) { // check if data already loaded 
     // ??? 
    } 
    }); 
}); 

我是一個正確的方式？或者有另一種解決方案？

Answer 1

原來我用錯了回調的成功完成。正確的回調是ajax:beforeSend，並帶有以下簽名function(event, xhr, settings)。爲了防止發送請求，我使用了xhr.abort()，它工作正常。

http://www.alfajango.com/blog/rails-3-remote-links-and-forms/

Answer 2

你可以在ajax調用之前設置一個像itemsLoaded = false這樣的標誌。詳細信息加載的那一刻，您可以將該標誌設置爲itemsLoaded = true。阿賈克斯調用只應執行時if(!itemsLoaded){/* Do ajax to fetch details */}else return;

Answer 3

我認爲你唯一能做的就是確保項目中的點擊只能進入ajax函數一次。方法可以做到這一點：

• click事件調用禁用的項目

• 如果你想確保的綁定功能，你做了ajax成功函數相同

• 單擊該項目後，您的功能將檢查項目信息是否已經存在。如果是，那麼它只是返回。

Answer 4

一種解決方案是，你可以創建一個布爾值，則只會使Ajax調用如果該值爲false。

Answer 5

設置在阿賈克斯的變量：成功的功能是這樣的...

AjaxSuccessVar=0; 
$(function(){ 
    $('.item').bind('ajax:success', function(xhr, data, status){ 
     AjaxSuccessVar = 1; 
}); 

$('.item').bind('ajax:before', function(xhr){ 
    if (AjaxSuccessVar==0) { // check if data already loaded 
     //then do your ajax function here 
    } 
}); 

Answer 6

如何使用.data屬性作爲一個指標，如：

$('.item').bind('ajax:success', function(xhr, data, status){ 
     $(this).data("loaded", true); 

    }).bind('ajax:before', function(xhr){ 
     if (!$(this).data("loaded")) { 
      // data has not been loaded 
     } else { 
      // do something 
     } 
    }); 

編輯：

嘗試從項目「觸發器」點擊後解除綁定，例如：

$(".item").click(function() { 
    $.ajax({ ... }); 
    $(this).unbind("click"); 
}); 

或者是請求ajax:success

$('.item').bind('ajax:success', function(xhr, data, status){ 
     $(this).unbind("click"); 
    });