jQuery を使用した二重フォーム送信を防ぐにはどうすればよいですか?

jQuery による二重フォーム送信の防止

特定のシナリオでは、サーバーがまだフォームを処理している間にユーザーがフォームを再送信できないようにすることが不可欠になります。最初の提出。この記事では、jQuery を使用したこの問題の解決策を提供し、二重送信を効果的に防止しながらフォームの機能を維持することを約束します。

問題を引き起こす jQuery コード

最初の jQuery コードでは、すべての機能が無効になります。送信ボタンを含むフォーム要素が含まれるため、フォームは送信されません。異なる機能を持つ複数のボタンが存在する可能性があるため、送信ボタンのみを無効にすることが重要です。

改訂されたソリューション

改訂されたソリューションでは、jQuery のデータ属性を利用して、二重送信を防止します。送信ボタンを変更します。改善されたコードは次のとおりです:

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

使用法

このソリューションを実装するには、フォーム要素でPreventDoubleSubmission 関数を呼び出すだけです:

$('form').preventDoubleSubmission();

AJAX の処理フォーム

特定のフォームでページ読み込み内で複数の送信を許可する必要がある場合は、クラスを使用してそれらを除外できます:

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

この改善されたソリューションを組み込むことで、効果的に二重送信を防ぐことができますWeb アプリケーションでのフォーム送信により、シームレスなユーザー エクスペリエンスを確保し、潜在的なデータの不整合を回避します。

以上がjQuery を使用した二重フォーム送信を防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。