Écrire le code PHP qui sera exécuté par AJAX

Les appels AJAX ouvrent la porte à une meilleure expérience utilisateur en permettant d'exécuter une fonction serveur à partir du client. Le code serveur est donc exécuté (ex : une lecture ou une écriture dans la base de données) sans que la page ne subisse un postback.

En PHP, le code qui sera appelé par AJAX sera placé dans son propre fichier .php.

▼Publicité

Voici comment les données seront transmises entre l'appel AJAX et le programme PHP :

  • Les données que le codce PHP reçoit de l'appel AJAX seront placées dans $_POST ou dans $_GET selon le type de requête AJAX.
  • Pour retourner de l'information à AJAX, le code PHP fera simplement un ou plusieurs echo.

Voici un exemple de code PHP pouvant être appelé par AJAX. Ce code sera écrit dans un fichier que l'on a choisi d'appeler majeur-ou-mineur.php :

PHP

$retour = "";

$donneeRecue = $_POST['age'];

 

// si le code serveur effectuait une tâche réservée à certains usagers,

// il faudrait mettre en place un mécanisme pour vérifier les droits de l'usager authentifié.  

// ...

 

// pour les opérations critiques, il faudrait également utiliser un mécanisme de nonce et vérifier ici si le nonce est valide

// ...

 

// validation des données 

if (is_numeric($donneeRecue)) {

 

    $age = intval($donneeRecue);

 

    // traitement

    if ($age >= 18) {

        $retour = 'majeur';

    }

    else {

        $retour = 'mineur';

    }

}

else {

    $retour = "$donneeRecue n'est pas un nombre";

}

 

// on utilise json_encode lorsque l'appel AJAX est fait avec dataType: "json"

echo json_encode($retour);

Cette fonction pourra être appelée via AJAX comme suit :

HTML

// insérer jQuery dans la page Web

...

 

<form id="formulaire" method="post">

    <label for="age">Âge :</label>

    <input type="text" name="age" id="age" />

    <input type="submit" id="soumettre" value="Soumettre" />

</form>

 

<div id="reponseajax"></div>

 

<script>

    $(function () {

        $("#soumettre").click(function (event) {

            event.preventDefault();    // pour ne pas que le bouton fasse un postback

            majeurOuMineur();

        });

    });

    

    function majeurOuMineur() {

        // initialise une chaîne au format champ1=valeur1&champ2=valeur2...

        var donneesFormulaire = $("#formulaire").serialize();

 

        // appel AJAX

        var jqxhr = $.ajax({ 

            type: 'post',   // toujours travailler en post quand on doit envoyer des données au serveur

            url: 'majeur-ou-mineur.php',

            dataType: "json",

            // ce contentType est le seul qui permet d'initialiser $_POST avec les valeurs du formulaires sous PHP

            contentType: "application/x-www-form-urlencoded; charset=UTF-8",  

            data: donneesFormulaire

        })

        .done(function (response, textStatus, jqXHR) {

            // Appel réussi : on affiche la valeur de retour du code serveur

            $("#reponseajax").html(response);

        })

        .fail(function (jqXHR, textStatus, errorThrown) {

            // Réagit si le code serveur n'a pas pu être appelé par AJAX ou s'il a planté

            $("#reponseajax").html("Oups ! Il n'est pas possible de vérifier si vous êtes majeur.");

        });

    }

</script>

Pour plus d'information

« jQuery Tutorial: Submit a Form and Post Data Using jQuery and AJAX ». John Morris. http://www.johnmorrisonline.com/jquery-tutorial-submit-a-form-and-post-data-using-jquery-and-ajax/

« $_POST ». php.net. http://php.net/manual/fr/reserved.variables.post.php

« jQuery AJAX post is empty when content-type is set to JSON UTF-8 ». Stack Overflow. http://stackoverflow.com/questions/5021560/jquery-ajax-post-is-empty-when-content-type-is-set-to-json-utf-8

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories