Ajax和防止双重“提交”

问题描述：

我正在处理遗留的应用程序，他们在许多Ajax表单“提交”中使用[a]标记。如果我们使用[input]按钮，我们可以设置[input]标签的disable属性。但超链接禁用不是规范的一部分，并且不一致的跨浏览器。Ajax和防止双重“提交”

我们正在寻找一种简单的解决方案来阻止超链接上的额外点击。

注：我们正在使用JavaScript与jQuery

这对我有用.http：//stackoverflow.com/questions/16777003/what-is-the-easiest-way-to-disable-启用按钮和链接jQuery的引导 – radztech 2014-01-23 23:21:39

radztech，酷的方法做到这一点。感谢您的支持 – BuddyJoe 2014-01-29 15:42:11

答

womp的解决方案是一个非常非常彻底的方式来解决这个问题。

但是，如果你想要一些简单的东西，我可能会实现一个semaphore。只需设置“提交”标志，然后测试用户单击链接时是否设置了信号量。您可以通过在DOM对象本身上设置标志或使用全局布尔值来完成此操作。

$('#link').each(function() { 
    this.submitting = false; 
}).click(function() { 
    if (!this.submitting) 
    { 
     this.submitting = true; 
     var self = this; 
     $.ajax({ 
      success: function() { 
       self.submitting = false; 
      }, 
      error: function() { 
       self.submitting = false; // make sure they can try again 
      } 
     }); 
    } 
});

我明显缩短了$ .ajax调用，但我认为你明白了。

编辑：呃......其实，忘了最重要的部分。如果（！提交）。

既然你总是设置在响应中的'self.submitting'状态，你可以简化回调挂钩： '$阿贾克斯（{ \t完整：函数（）{ \t \t self.submitting = FALSE; \t} }）;' – matsev 2011-11-22 13:46:54

如果第二次点击出现在if（！this.submitting）'和this.submitting = true;'行之间，这将不起作用。这是如何不执行信号量的经典例子;-) – Steves 2013-06-20 11:06:47

@Steves在JS执行模型下是不可能的。您是否将此线程误认为Java？：P – Esailija 2013-06-20 13:16:11

答

在你的“点击”处理程序要么返回false或防止默认 -

$('#target').click(function(e) { 
    e.preventDefault(); 
    alert('Handler for .click() called.'); 
}); 

$('#target').click(function(e) { 
    alert('Handler for .click() called.'); 
    return false; 
});

嗯......只允许按钮一次按下（整个页面的生命），那么也许使用。数据（） -

http://api.jquery.com/data/

或切换的属性。

正确的金钱。 – Gavrisimo 2010-07-06 16:53:25

这会阻止链接的默认操作，是的。但是，我认为tyndall想要阻止进一步的AJAX调用，在这种情况下，我不相信这会起作用。 – 2010-07-06 16:56:14

答

我喜欢Ben Nadel的routine for handling this。

本质上，你创建了一个包装jQuery .ajax函数的包装器，并且你可以构建应用程序中每个ajax请求发生的各种事情。其中一件事是请求跟踪。

你会在他的getJSON包装方法中看到，它为请求名称提供了一个可选的“name”参数。这可以是任何事情，只是确定请求来源的关键。在你的情况下，它会由每个链接点击提供。如果名称参数存在，则将其存储在跟踪集合中。

如果另一个呼叫以相同的请求名称进入，它将被简单地删除。原始请求返回后，他将清除该请求名称的跟踪标志。

该方法非常适合将大量常用功能扩展到应用程序中的所有ajax请求。我创建了一个多请求处理程序，它还允许您指定新请求的行为 - 无论是放弃任何现有的请求还是放弃。当你想要处理最新的请求时，这很有用，例如autocompletes。

非常彻底的解决方案。 +1 – 2010-07-06 17:09:55

答

当这个链接执行ajax请求时会发生什么？如果是这样，你可以看看这个

http://www.protofunc.com/scripts/jquery/ajaxManager3/（不是他们是你想要采取的存储库中的3.05版本）。

这有一个选项可以停止重复的ajax请求。你

也可以看看

http://jquery.malsup.com/block/

他们点击链接和装载标志来了，他们再也不能点击该链接。

答

var fooObj = { 
    isAdd : true, 
    add : function(){ 
     if(fooObj.isAdd == true){ 
      fooObj.isAdd = false; 
      var opt = { 
       url : 'http://yoururl.com', 
       type : 'post', 
       success : function(response){ 
        if(response=='save'){ 
         fooObj.isAdd = true; 
        } 
       } 
      } 
      $.ajax(opt);  
     } 
    } 
}

我认为这是行得通的。使用ajax时，我注意到IE浏览器响应也很慢。

请使用Ctrl + K选项来格式化您的代码而不是HTML，它更容易阅读（并为您设置格式）。 – DaveShaw 2012-03-19 21:29:55

答

对于所有触发ajax调用的事件，在父组件或所有页面上首先添加一个加载图层以防止新事件触发并且另一方面通知用户加载数据正在进行中。你可以通过使用jQuery BlockUI Plugin来实现，例如实现起来非常简单

Ajax和防止双重“提交”

相关推荐