Ajax和防止双重“提交”

沃普的解决方案是一个非常彻底的方法。

但是,如果您想要一些更简单的东西,我可能会实现 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调用,但我想你明白了。

编辑: 呃。。。实际上,忘记了最重要的部分。IF(!)提交)。

在“click”处理程序中,返回false或阻止默认值-

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

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

隐马尔可夫模型。。。如果只允许按下一次按钮(在整个页面的生命周期内),那么可以使用.data()。-

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

或切换属性。

我喜欢本·纳德尔的 routine for handling this .

本质上,您可以围绕jquery.ajax函数创建一个包装器,并且可以为应用程序中的每个ajax请求构建各种各样的东西。其中之一就是请求跟踪。

你会在他的 getJSON wrapper方法,它为请求名接受一个可选的“name”参数。这可以是任何东西,只是识别请求来源的关键。在您的情况下,它将由每个链接单击提供。如果name参数存在,则将其存储在跟踪集合中。

如果另一个调用具有相同的请求名,则只会将其丢弃。一旦原始请求返回,他将清除该请求名称的跟踪标志。

这种方法非常适合将许多通用功能扩展到应用程序中的所有Ajax请求。我已经创建了一个多请求处理程序,它还允许您指定新请求的行为——它是中止任何现有的请求,还是直接删除。当您希望处理最新的请求时(如自动完成),这很有用。

当这个链接执行Ajax请求时会发生什么?如果是这样,你可以看看这个

http://www.protofunc.com/scripts/jquery/ajaxManager3/ (不是您可能想要的存储库中的3.05版本)。

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

你也可以看看

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

他们点击链接,一个加载标志出现,他们不能再点击该链接。

对于所有触发Ajax调用的事件,最好在父组件或所有页面上添加一个加载层,以防止新的事件触发,另一方面通知用户正在加载数据。 您可以使用 jQuery BlockUI Plugin 例如,很容易实现

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浏览器响应缓慢。