Bagaimanakah Saya Boleh Mencegah Penyerahan Borang Berganda dengan jQuery?

Mencegah Penyerahan Borang Berganda dengan jQuery

Dalam senario tertentu, menjadi penting untuk menghalang pengguna daripada menghantar semula borang semasa pelayan masih memproses penyerahan awal. Artikel ini menyediakan penyelesaian kepada isu ini menggunakan jQuery, menjanjikan untuk mengekalkan fungsi borang sambil menghalang penyerahan berganda dengan berkesan.

Kod jQuery Menyebabkan Isu

Kod jQuery awal anda melumpuhkan semua elemen borang, termasuk butang hantar, yang mengakibatkan borang tidak dihantar. Melumpuhkan butang serah sahaja adalah penting, kerana berbilang butang mungkin wujud dengan fungsi yang berbeza.

Penyelesaian Disemak

Penyelesaian yang disemak menggunakan atribut data dalam jQuery untuk mengelakkan penyerahan berganda tanpa mengubah suai butang hantar. Berikut ialah kod yang dipertingkatkan:

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 melaksanakan penyelesaian ini, hanya gunakan fungsi preventDoubleSubmission pada elemen borang:

$('form').preventDoubleSubmission();

Mengendalikan AJAX Borang

Jika borang tertentu membenarkan berbilang penyerahan dalam pemuatan halaman, anda boleh mengecualikannya menggunakan kelas:

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

Dengan menggabungkan penyelesaian yang dipertingkat ini, anda boleh mencegah dua kali ganda dengan berkesan penyerahan borang dalam aplikasi web anda, memastikan pengalaman pengguna yang lancar dan mengelakkan kemungkinan ketidakkonsistenan data.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencegah Penyerahan Borang Berganda dengan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!