且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

防止在jQuery中重复提交表单

更新时间:2023-12-02 10:08:34

2018 年更新:我刚刚为这个旧答案得到了一些分数,只是想补充一下 best 解决方案是使操作具有幂等性,以便重复提交是无害的.

Update in 2018: I just got some points for this old answer, and just wanted to add that the best solution would be to make the operation idempotent so that duplicate submissions are harmless.

例如,如果表单创建订单,则在表单中放置一个唯一 ID.服务器第一次看到具有该 ID 的订单创建请求时,它应该创建它并响应成功".随后的提交也应回复成功".(如果客户没有得到第一个响应)但不应该改变任何东西.

Eg, if the form creates an order, put a unique ID in the form. The first time the server sees an order creation request with that id, it should create it and respond "success". Subsequent submissions should also respond "success" (in case the client didn't get the first response) but shouldn't change anything.

应通过数据库中的唯一性检查来检测重复项,以防止出现竞争条件.

Duplicates should be detected via a uniqueness check in the database to prevent race conditions.

我认为你的问题是这一行:

I think that your problem is this line:

$('input').attr('disabled','disabled');

您正在禁用所有输入,包括我猜想表单应该提交其数据的输入.

You're disabling ALL the inputs, including, I'd guess, the ones whose data the form is supposed to submit.

要仅禁用提交按钮,您可以执行以下操作:

To disable just the submit button(s), you could do this:

$('button[type=submit], input[type=submit]').prop('disabled',true);

但是,即使这些按钮被禁用,我认为 IE 也不会提交表单.我会建议一种不同的方法.

However, I don't think IE will submit the form if even those buttons are disabled. I'd suggest a different approach.

我们刚刚用下面的代码解决了这个问题.这里的技巧是使用 jQuery 的 data() 来标记表单是否已经提交.这样一来,我们就不必弄乱提交按钮,这会让 IE 崩溃.

We just solved this problem with the following code. The trick here is using jQuery's data() to mark the form as already submitted or not. That way, we don't have to mess with the submit buttons, which freaks IE out.

// 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 表单应该允许在每次页面加载时提交多次,您可以给它们一个类来指示,然后将它们从选择器中排除,如下所示:

If there are AJAX forms that should be allowed to submit multiple times per page load, you can give them a class indicating that, then exclude them from your selector like this:

$('form:not(.js-allow-double-submission)').preventDoubleSubmission();