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

防止 jQuery 中的表单重新提交

在表单提交中，防止用户在服务器处理延迟期间意外提交两次至关重要。常见的解决方案是在提交时禁用表单元素。但是，这种方法可能会禁用不应该的元素，例如包含基本数据的输入。

仅禁用提交按钮

专门禁用提交按钮并避免干扰对于表单提交，请使用以下代码：

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

用于防止双重提交的 jQuery 插件

另一个有效的解决方案是创建一个利用 data( ) 函数将表单标记为已提交：

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 表单

如果您有需要多次提交的 AJAX 表单，请通过添加类并使用以下选择器来排除它们：

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

通过利用这些技术，您可以防止重复表单提交并确保服务器流畅正在处理。

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