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。只应在if(!itemsLoaded){/* Do ajax to fetch details */}else return;

时执行ajax调用

Answer 2

我认为你唯一能做的就是确保项目中的点击仅转到ajax函数一次。如何做到这一点：

click事件调用一个禁用项目绑定的函数
如果你想确定，你在ajax成功函数中也这样做
点击该项目后，您的功能会检查项目信息是否已存在。如果是，那么它就会返回。

Answer 3

一个解决方案是你可以创建一个布尔值，然后只有当该值为false时才进行ajax调用。

Answer 4

在Ajax中设置一个变量：成功函数就像这样......

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/

如何防止ajax请求？

6 个答案: