Comment puis-je soumettre un formulaire à l'aide de jQuery Ajax POST sans actualisation de la page ?

Exemple POST jQuery Ajax avec PHP

Cet exemple montre comment envoyer des données de formulaire à un script PHP à l'aide des fonctionnalités Ajax de jQuery.

Le problème

Lors de la soumission d'un formulaire en utilisant le traditionnel méthode, le navigateur redirige vers l’URL d’action spécifiée. Cependant, nous souhaitons capturer les données du formulaire et les soumettre à un script PHP sans provoquer d'actualisation de la page.

La solution jQuery et Ajax

La méthode .ajax de jQuery permet nous pour faire des requêtes asynchrones au serveur. Voici comment nous pouvons l'utiliser pour envoyer des données de formulaire :

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;

Cette solution utilise les gestionnaires de rappel .done() et .fail() pour gérer respectivement les scénarios de réussite et d'échec. Le rappel .always() est appelé quel que soit le résultat de la requête.

Notes supplémentaires :

• Le raccourci jQuery .post peut être utilisé à la place de .ajax.
• N'oubliez pas de nettoyer les données du formulaire côté serveur.
• Ce code est compatible avec les versions jQuery 1.8 et ultérieures.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!