Question

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

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

注意：我们在JavaScript中使用jQuery

Answer 1

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（！提交）。

Answer 2

在“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/

或切换属性。

Answer 3

我喜欢Ben Nadel的routine for handling this。

基本上，您可以围绕jQuery .ajax函数创建一个包装器，并且可以为应用程序中的每个ajax请求构建所有类型的事物。其中一个是请求跟踪。

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

如果另一个呼叫带有相同的请求名称，则会将其删除。原始请求返回后，他会清除该请求名称的跟踪标志。

此方法非常适合将大量常用功能扩展到应用程序中的所有ajax请求。我已经创建了一个多请求处理程序，它还允许您指定新请求的行为 - 无论是中止任何现有请求还是仅删除。当您想要处理最新请求时，这非常有用，例如自动填充。

Answer 4

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

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

这可以选择停止重复的ajax请求。

你也可以看看

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

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

Answer 5

对于触发ajax调用的所有事件，首先在父组件或所有页面上添加加载层以防止新事件触发，并且另一方面通知用户，这是一个很好的实践。正在加载数据。您可以使用jQuery BlockUI Plugin来执行此操作，例如，实现起来非常简单

Answer 6

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浏览器的响应速度很慢。

Ajax和防止双重“提交”

6 个答案: