Modifier la base de données avec jQuery.ajax()

Une autre application intéressante d'AJAX consiste à ajouter, modifier ou supprimer des informations dans la base de données. Par exemple, si un usager ajoute un commentaire sur une page Web, son commentaire pourrait, grâce à AJAX, être enregistré sans que la page ait besoin d'être rechargée. 

Encore une fois, ceci améliorera l'expérience utilisateur.

Mais attention : il faudra mettre en place des mécanismes de protection afin d'éviter que des utilisateurs malveillants s'emparent du code AJAX pour modifier les données d'une façon non souhaitable. Les nonces sont tout désignées pour cela.

▼Publicité

Voici donc le code PHP qui sera appelé par AJAX :

PHP

// enregistre les données dans un formulaire après avoir validé le nonce ainsi que les données en tant que tel

// ce code est destiné à être appelé via AJAX

// retournera true (encodé en json) si a réussi l'enregistrement

 

require_once 'include/nonce.php';

 

// branchement à la base de données

// ...

 

// la valeur de retour sera à true seulement si l'enregistrement est réussi

$retour = false;

 

// 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é. 

// rien de particulier à faire ici puisque le nonce assure que l'usager est authentifié.

 

// valider le nonce

$nonce_valide = false;

if (isset($_POST['nonce'])) {   // le nonce est stocké dans un champ caché du formulaire

    $nonce_valide = verifier_nonce($_POST['nonce'], 'enregistrer');

}

 

if ($nonce_valide) {

    // retrouver les données du formulaire qui ont été envoyées par AJAX

    $auteur = $_POST['auteur'];

    $courriel = $_POST['courriel'];

    $commentaire = $_POST['commentaire'];

 

    // valider les données côté serveur

    $donneesValides = true;

    if ('' == $auteur) {

        $donneesValides = false;

    }

 

    if ('' == $courriel) || (!filter_var($courriel, FILTER_VALIDATE_EMAIL)) {

        $donneesValides = false;

    }

 

    if ('' == $commentaire) {

        $donneesValides = false;

    }

 

    if ($donneesValides) {

        // enregistrer les données

        $requete = "INSERT INTO commentaires (commentaire_texte, commentaire_auteur, commentaire_courriel, commentaire_date) VALUES (?, ?, ?, NOW());";

        $stmt = $mysqli->prepare($requete);

 

        if ($stmt) {

            $stmt->bind_param("sss", $commentaire, $auteur, $courriel);

            $stmt->execute();

 

            if ($mysqli->affected_rows > 0) {

                // si problème dans la requête ou dans les paramètres, le retour est déjà à false  

                $retour = true;

            }

            $stmt->close();

        }

    }

}

 

echo json_encode($retour);

La page Web affichant le formulaire pourra faire appel à ce code par AJAX comme suit :

HTML

<?php require_once 'include/nonce.php'; ?>

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

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

    <p>

        <input type="hidden" name="nonce" value="<?php echo creer_nonce('enregistrer'); ?>"/>

        <label for="auteur">* Nom :</label>

        <input id="auteur" name="auteur" required />

    </p>

    <p>

        <label for="courriel">* Courriel :</label>

        <select id="courriel" name="courriel" required />

    </p>

    <p>

        <textarea id="commentaire" name="commentaire"></textarea>

    </p>

    <p>

        <input type="submit" value="Enregistrer" name="enregistrer" id="enregistrer" />

    </p>

</form>

 

<script>

    $(function() {

        $('#formulairecommentaire').submit(function(event) {

            event.preventDefault();    // il faut empêcher le comportement par défaut du bouton sinon la page fera un postback

            enregistrement();            

        });

    });

 

    function enregistrement() {

        // validation côté client

        var auteur = $('#auteur').val();

        var erreurValidation = "";

 

        if (...) {

            erreurValidation += "...";

        }

 

        ...

 

        if (erreurValidation != "") {

            $('#reponseajax').html(erreurValidation);

        }

        else {

            // appel AJAX

            var formData = $("#formulairecommentaire").serialize();   // retourne une chaîne au format champ1=valeur1&champ2=valeur2..

 

            var jqxhr = $.ajax({

                type: 'post',

                url: 'enregistrer-commentaire.php',

                dataType: "json",

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

                data: formData

            })

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

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

                if (response === true) {

                    $("#formulairecommentaire").html("");   // on efface le formulaire

                    $("#reponseajax").html("Votre commentaire a été enregistré.");

                }

                else {

                    $("#formulairecommentaire:input").attr("disabled", true);   // on désactive le formulaire

                    $("#reponseajax").html("Un problème empêche l'enregistrement de votre commentaire.");

                }

            })

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

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

                $("#formulairecommentaire:input").attr("disabled", true);   // on désactive le formulaire

                $("#reponseajax").html("Un problème empêche l'enregistrement de votre commentaire.");

            })

        }

    }

</script>

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