プラグインを使用して jQuery でフォームの二重送信を防ぐ方法

プラグインを使用して 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 中国語 Web サイトの他の関連記事を参照してください。