如何使用外掛程式防止 jQuery 中的表單重複提交？-js教程-PHP中文網

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

Linda Hamilton

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

原創

614 人瀏覽過

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