如何防止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调用之前设置itemsLoaded = false这样的标志。加载细节后，您可以将该标志设置为itemsLoaded = true。ajax调用应该只在if(!itemsLoaded){/* Do ajax to fetch details */}else return;

Answer 2

我认为您唯一能做的就是确保在项目中的单击只进入ajax函数一次。方法:

• click事件调用一个函数来禁用项目的绑定

• 如果你想确定，你做同样的ajax成功函数

• 点击物品后，你的功能检查物品信息是否已经存在。如果是，则返回

Answer 3

一种解决方案是，您可以创建一个布尔值，然后仅在该值为false时才进行ajax调用。

Answer 4

在Ajax:success函数中像这样设置一个变量…

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 5

如何使用.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");
  });

Answer 6

原来我用错了回调。右回调号码为ajax:beforeSend，签名为function(event, xhr, settings)。为了防止请求发送，我使用xhr.abort()，它工作良好。

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