如何防止 jQuery 中的双重表单提交：什么技术最有效？

如何在 jQuery 中防止双重表单提交

在处理需要大量时间处理的表单时，防止用户意外提交多次提交表格至关重要。本文讨论了使用 jQuery 实现此目的的方法。

初始尝试

初始方法涉及在表单提交时禁用所有输入和按钮。然而，这种技术导致表单无法在 Firefox 中提交。

改进的解决方案

解决方案在于有选择地仅禁用提交按钮，因为禁用所有输入可能会干扰表单提交。以下 jQuery 代码可实现此目的：

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

替代插件方法

另一种选择是使用下面的 jQuery 插件，它利用 jQuery 的 data() 函数来标记

jQuery.fn.preventDoubleSubmission = function() {
  $(this).on('submit', function(e) {
    var $form = $(this);

    if ($form.data('submitted') === true) {
      e.preventDefault();
    } else {
      $form.data('submitted', true);
    }
  });

  return this;
};

用法：

$('form').preventDoubleSubmission();

排除 AJAX 表单

如果您的应用程序包含 AJAX 表单，应允许多次提交，您可以通过添加类来排除它们，如下所示：

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

以上是如何防止 jQuery 中的双重表单提交：什么技术最有效？的详细内容。更多信息请关注PHP中文网其他相关文章！