Bagaimana untuk Mencegah Penyerahan Borang Berganda dalam jQuery Tanpa Melumpuhkan Elemen Borang?

Halang Penyerahan Berganda dalam Borang Menggunakan jQuery

Pengguna sering menyerahkan semula borang secara tidak sengaja, terutamanya apabila mereka mengambil masa yang lama untuk diproses. Untuk mengelakkan ini, jQuery boleh digunakan untuk melumpuhkan penyerahan borang selepas percubaan awal. Walau bagaimanapun, dalam beberapa kes, melumpuhkan semua elemen borang, termasuk input, mungkin secara tidak sengaja menghalang penyerahan itu sendiri.

Penyelesaian yang Diperbaiki menggunakan Pemalam jQuery

Pendekatan alternatif ialah menggunakan pemalam jQuery untuk mengendalikan pencegahan penyerahan berganda. Pemalam ini memanfaatkan kaedah data() jQuery untuk menandakan borang sebagai telah diserahkan atau tidak.

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

Penggunaan

Untuk menggunakan pemalam ini, masukkan sahaja dengan $(' form').preventDoubleSubmission();.

Kecualikan Borang AJAX Yang Dibenarkan

Jika borang tertentu (cth., borang AJAX) harus dibenarkan untuk diserahkan beberapa kali, mereka boleh dikecualikan menggunakan kelas CSS, seperti yang dilihat dalam contoh berikut:

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

Dengan kaedah ini, borang boleh diserahkan tanpa sebarang isu, manakala penyerahan semula secara tidak sengaja dihalang dengan berkesan, meningkatkan pengalaman pengguna dan menghalang potensi kehilangan data .

Atas ialah kandungan terperinci Bagaimana untuk Mencegah Penyerahan Borang Berganda dalam jQuery Tanpa Melumpuhkan Elemen Borang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!