Ajax 和防止双重“提交”

Posted 2023-03-05

【中文标题】Ajax 和防止双重“提交”

【英文标题】：Ajax and Preventing Double "submit"

【发布时间】：2011-03-12 10:18:15

【问题描述】：

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

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

注意：我们使用 javascript 和 jQuery

【问题讨论】：

这对我有用。***.com/questions/16777003/…

radztech，很酷的方法。感谢您的提醒

【参考方案1】：

在您的“点击”处理程序中，要么返回 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/

或者切换一个属性。

【讨论】：

这将阻止链接的默认操作，是的。但是，我认为 tyndall 想要阻止进一步的 AJAX 调用，在这种情况下，我认为这不会起作用。

【参考方案2】：

我喜欢 Ben Nadel 的 routine for handling this。

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

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

如果另一个调用具有相同的请求名称，它就会被丢弃。一旦原始请求返回，他就会清除该请求名称的跟踪标志。

此方法非常适合将许多通用功能扩展到应用程序中的所有 ajax 请求。我创建了一个多请求处理程序，它还允许您指定新请求的行为——它是否会中止任何现有请求或只是被丢弃。当您希望处理最新的请求（例如自动完成）时，这很有用。

【参考方案3】：

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 调用，但我想你明白了。

编辑：呃...实际上，忘记了最重要的部分。 if (!submitting)。

【讨论】：

由于您总是在响应中设置self.submitting 状态，您可以将回调挂钩简化为：$.ajax( complete: function() self.submitting = false; );

如果第二次点击出现在if (!this.submitting) 和this.submitting = true; 行之间，这将不起作用。这是如何不实现信号量的经典示例；-)

@Steves 这在 JS 执行模型下是不可能的。你把这个线程误认为是Java吗？ :P

这是一个救生员。我的 jQuery-UJS 表单无缘无故地重复提交，现在它没有:-)

【参考方案4】：

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

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

这有一个选项来停止重复的 ajax 请求。

你也可以看看

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

他们点击链接，然后出现加载标志，他们无法再点击该链接。

【参考方案5】：

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，它更容易阅读（并且你可以格式化）。

【参考方案6】：

对于所有触发 ajax 调用的事件，最好在父组件或所有页面上添加加载层，一方面防止新的事件触发，另一方面通知用户加载数据正在处理。 您可以通过使用 jQuery BlockUI Plugin 来做到这一点，例如这很容易实现