Wie kann ich ein Formular mit jQuery Ajax POST ohne Seitenaktualisierung senden?

jQuery Ajax POST-Beispiel mit PHP

Dieses Beispiel zeigt, wie Formulardaten mithilfe der Ajax-Funktionen von jQuery an ein PHP-Skript gesendet werden.

Das Problem

Beim Absenden eines Formulars auf herkömmliche Weise -Methode leitet der Browser zur angegebenen Aktions-URL weiter. Wir möchten jedoch die Formulardaten erfassen und an ein PHP-Skript senden, ohne eine Seitenaktualisierung zu verursachen.

Die jQuery- und Ajax-Lösung

Die .ajax-Methode von jQuery ermöglicht dies uns, asynchrone Anfragen an den Server zu stellen. So können wir damit Formulardaten senden:

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;

Diese Lösung verwendet die Callback-Handler .done() und .fail(), um die Erfolgs- bzw. Fehlerszenarien zu behandeln. Der .always()-Rückruf wird unabhängig vom Ergebnis der Anfrage aufgerufen.

Zusätzliche Hinweise:

• Anstelle von kann die jQuery-Kurzschrift .post verwendet werden .ajax.
• Denken Sie daran, Formulardaten auf der Serverseite zu bereinigen.
• Dieser Code ist kompatibel mit jQuery-Versionen 1.8 und höher.

Das obige ist der detaillierte Inhalt vonWie kann ich ein Formular mit jQuery Ajax POST ohne Seitenaktualisierung senden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!