2018 年更新:我刚刚为这个旧答案得到了一些分数,只是想补充一点,最好的解决方案是使操作具有幂等性,以便重复提交是无害的。
例如,如果表单创建订单,则在表单中放置一个唯一 ID。服务器第一次看到具有该 ID 的订单创建请求时,它应该创建它并响应“成功”。随后的提交也应该响应“成功”(以防客户没有得到第一个响应)但不应该改变任何东西。
应通过数据库中的唯一性检查来检测重复项,以防止出现竞争条件。
我认为你的问题是这一行:
$('input').attr('disabled','disabled');
您正在禁用所有输入,包括我猜想表单应该提交其数据的输入。
要仅禁用提交按钮,您可以这样做:
$('button[type=submit], input[type=submit]').prop('disabled',true);
但是,即使这些按钮被禁用,我认为 IE 也不会提交表单。我会建议一种不同的方法。
一个jQuery插件来解决它
我们刚刚用下面的代码解决了这个问题。这里的技巧是使用 jQuerydata()
将表单标记为是否已提交。这样一来,我们就不必弄乱提交按钮,这让 IE 大吃一惊。
// jQuery plugin to prevent double submission of forms
jQuery.fn.preventDoubleSubmission = function() {
$(this).on('submit',function(e){
var $form = $(this);
if ($form.data('submitted') === true) {
// Previously submitted - don't submit again
e.preventDefault();
} else {
// Mark it so that the next submit can be ignored
$form.data('submitted', true);
}
});
// Keep chainability
return this;
};
像这样使用它:
$('form').preventDoubleSubmission();
如果有应该允许每次页面加载多次提交的 AJAX 表单,你可以给它们一个类来指示,然后像这样从你的选择器中排除它们:
$('form:not(.js-allow-double-submission)').preventDoubleSubmission();