Rumah >hujung hadapan web >tutorial js >Bagaimanakah Saya Boleh Menghantar Borang Menggunakan jQuery Ajax POST tanpa Penyegaran Halaman?

Bagaimanakah Saya Boleh Menghantar Borang Menggunakan jQuery Ajax POST tanpa Penyegaran Halaman?

Susan Sarandon
Susan Sarandonasal
2025-01-04 08:28:35538semak imbas

How Can I Submit a Form Using jQuery Ajax POST without Page Refresh?

Contoh JQuery Ajax POST dengan PHP

Contoh ini menunjukkan cara menghantar data borang ke skrip PHP menggunakan keupayaan Ajax jQuery.

Masalahnya

Apabila menyerahkan menggunakan kaedah tradisional, penyemak imbas mengubah hala ke URL tindakan yang ditentukan. Walau bagaimanapun, kami ingin menangkap data borang dan menyerahkannya kepada skrip PHP tanpa menyebabkan penyegaran halaman.

Penyelesaian jQuery dan Ajax

Kaedah .ajax jQuery membenarkan kami untuk membuat permintaan tak segerak kepada pelayan. Begini cara kami boleh menggunakannya untuk menghantar data borang:

HTML:

<form>

jQuery:

$("#foo").submit(function(event) {
    event.preventDefault();

    var $form = $(this);
    var serializedData = $form.serialize();

    $.ajax({
        url: "/form.php",
        type: "post",
        data: serializedData,
        done: function (response, textStatus, jqXHR) {
            console.log("Hooray, it worked!");
        },
        fail: function (jqXHR, textStatus, errorThrown) {
            console.error("The following error occurred: " + textStatus, errorThrown);
        },
        always: function () {
            // Reenable form inputs
        }
    });
});

PHP (form.php):

// Access form data via $_POST
$bar = isset($_POST['bar']) ? $_POST['bar'] : null;

Penyelesaian ini menggunakan pengendali panggil balik .done() dan .fail() untuk mengendalikan senario kejayaan dan kegagalan masing-masing. Panggilan balik .always() dipanggil tanpa mengira hasil permintaan.

Nota Tambahan:

  • Shorthand jQuery .post boleh digunakan dan bukannya .ajax.
  • Ingat untuk membersihkan data borang pada bahagian pelayan.
  • Kod ini serasi dengan jQuery versi 1.8 dan lebih baru.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menghantar Borang Menggunakan jQuery Ajax POST tanpa Penyegaran Halaman?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn