Ajax和防止双重"提交"

Bud*_*Joe 7 html javascript ajax jquery hyperlink

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

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

注意:我们在jQuery中使用JavaScript

Rya*_*nal 6

womp的解决方案是一个非常彻底的解决方案.

但是,如果你想要一些更简单的东西,我可能会实现一个信号量.只需设置"提交"标志,并测试用户点击链接时是否设置了信号量.您可以通过在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
             }
        });
    }
});
Run Code Online (Sandbox Code Playgroud)

我显然缩短了$ .ajax电话,但我认为你明白了.

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

  • 由于你总是在响应中设置`self.submitting`状态,你可以简化回调挂钩:`$ .ajax({complete:function(){self.submitting = false;}});` (2认同)