首頁  >  文章  >  web前端  >  如何使用外掛程式防止 jQuery 中的表單重複提交?

如何使用外掛程式防止 jQuery 中的表單重複提交?

Linda Hamilton
Linda Hamilton原創
2024-11-10 20:57:03575瀏覽

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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn