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

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!