我正在处理一个遗留应用程序，他们在其中使用 [a] 标记进行许多 Ajax 表单“提交”。 如果我们使用 [input] 按钮，我们可以设置 [input] 标签的禁用属性。 但是在超链接上禁用不是规范的一部分，并且跨浏览器不一致。
我们正在寻找一种简单的解决方案来阻止对超链接的额外点击。
注意：我们使用 JavaScript 和 jQuery
【问题讨论】：
标签： javascript jquery html ajax hyperlink
在您的“点击”处理程序中，要么返回 false，要么阻止默认值 -
$('#target').click(function(e) {
e.preventDefault();
alert('Handler for .click() called.');
});
$('#target').click(function(e) {
alert('Handler for .click() called.');
return false;
});
嗯...只允许按钮被按下一次（在页面的整个生命周期中）然后可以使用 .data() -
或者切换一个属性。
【讨论】：
我喜欢 Ben Nadel 的 routine for handling this。
本质上，您围绕 jQuery .ajax 函数创建了一个包装器，并且您可以构建应用程序中每个 ajax 请求所发生的各种事情。其中之一是请求跟踪。
您会看到，在他的getJSON 包装方法中，它采用可选的“名称”参数作为请求名称。这可以是任何东西，它只是识别请求来源的关键。在您的情况下，它将由每个链接点击提供。如果 name 参数存在，则他将其存储在跟踪集合中。
如果另一个调用具有相同的请求名称，它就会被丢弃。一旦原始请求返回，他就会清除该请求名称的跟踪标志。
此方法非常适合将许多通用功能扩展到应用程序中的所有 ajax 请求。我创建了一个多请求处理程序，它还允许您指定新请求的行为——它是否会中止任何现有请求或只是被丢弃。当您希望处理最新的请求（例如自动完成）时，这很有用。
【讨论】：
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; 行之间，这将不起作用。这是如何不实现信号量的经典示例；-)
当此链接执行 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 浏览器响应缓慢。
【讨论】：
对于所有触发 ajax 调用的事件，最好在父组件或所有页面上添加加载层，一方面防止新的事件触发，另一方面通知用户加载数据正在处理。 您可以通过使用 jQuery BlockUI Plugin 来做到这一点，例如这很容易实现
【讨论】：