如何使用插件防止 jQuery 中的表单重复提交？-js教程-PHP中文网

如何使用插件防止 jQuery 中的表单重复提交？

Linda Hamilton

发布： 2024-11-10 20:57:03

原创

612 人浏览过

How to Prevent Forms from Double Submission in jQuery with a Plugin?

如何使用插件在 jQuery 中防止表单双重提交

当服务器端处理需要时间时，防止表单重新提交至关重要。不幸的是，像您尝试使用 jQuery 那样禁用所有表单输入可能会阻碍某些浏览器中的表单提交。

推荐方法：jQuery 插件

要有效防止重复提交，我们推荐自定义 jQuery插件：

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;
};

登录后复制

用法：

通过选择表单并调用 PreventDoubleSubmission() 来实现插件：

$('form').preventDoubleSubmission();

登录后复制

定制：

如果某些形式应允许每个页面加载多次提交，为它们分配一个类并将它们从选择器中排除：

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

登录后复制

其他注意事项：

如中所述原始答案，确保操作幂等是最佳解决方案。
这个插件依赖于 jQuery 的 data() 方法，旧版浏览器可能不支持。实施前考虑跨浏览器兼容性。

以上是如何使用插件防止 jQuery 中的表单重复提交？的详细内容。更多信息请关注PHP中文网其他相关文章！