Ajax avec PHP & Jquery

Vous avez débuté avec Ajax et vous êtes perdu ou simplement vous voulez l’apprendre, vous êtes à la bonne place . Aujourd’hui, nous allons parlé de la célèbre combinaison PHP / Jquery pour effectuer des actions avec Ajax.

Vous avez dit AJAX, c’est quoi?

AJAX signifie Asynchronous Javascript and XML. Il vous permet d’extraire le contenu du serveur principal de manière asynchrone, sans régénération de page. Ainsi, il vous permet de mettre à jour le contenu d’une page Web sans le recharger.

Pour vous expliquer en plus, nous allons créer une application pour vérifier si un enregistrement existe déjà dans la base de données

Le processus sera comme le suivant:

  1. L’utilisateur remplie un champ texte dans une formulaire
  2. Il clique sur le bouton ‘vérifier’
  3. Jquery va envoyé une requête AJAX vers le serveur
  4. Le serveur répond par 1 si l’enregistrement existe et 0 au contraire 
  5. En fonction de cette réponse, nous allons afficher une alerte javascript au client

Préparation de notre environnement

D’abord ,créons notre simple formulaire.

<form id="my_form">
<input type="text" name="nom" id="name">
<input type="submit" name="search" id="btn_search" value='Vérifier'>
</form>

Ensuite, ajoutons jquery comme dépendance de notre page html. 

NB: La balise script doit être en dessous des autres balise HTML. Donc, pour notre cas, c’est en dessous de notre formulaire 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Préparons maintenant notre code PHP [check.php] qui va effectuer la vérification depuis la base de données. Le code fourni n’est pas optimale, il s’en sert seulement pour exemple. PHP fera l’objet d’un autre tutoriel

Pour cet exemple, nous assumons que vous avez une base de donnée ‘tutorial’ contenant la table ‘my_table’ avec la structure comme la suivante :

my_table (id[int], nom[varchar])

// check.php
/* Connexion à la base de donnée. Avec la configuration par défaut de Mysql (user 'root' with no password)

* N'hésitez pas à l'adapter à votre contexte

*/
$nom = htmlspecialchars($_POST['name']);
try {
$pdo = new PDO("mysql:host=localhost:3306;dbname=tutorial", "root", "");
} catch (PDOException $exception) {
die('ERROR: Impossible de se connecter: '.$exception->getMessage());
}

try {
$sql = "SELECT * FROM my_table WHERE nom = '$nom'";
$result = $pdo->query($sql);
if ($result->rowCount() > 0) {
echo 1;
} else {
echo 0;
}

} catch (Exception $exception) {
die("Impossible d'éxecuter la requête");
}

Retournons maintenant dans notre page html, là où la requête AJAX sera envoyé

En dessous de l’ajout de la dépendance avec jquery, ajoutez-y un nouvel balise ‘script’ pour notre code AJAX. 

NB: Si vous n’êtes pas à l’aise avec les selecteurs jquery, je vous invite à lire sur ce site http://www.oujood.com/jquery/selecteurs-jQuery.php

<script type="text/javascript">
$(function() {
     //lorsqu'on soumet notre formulaire
    $('#my_form').submit(function(e) {
        //Empêcher l'action par défaut de soumission pour n'est pas recharger la page
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: 'check.php',
            data: {'name': $('#name').val()},
            success: function(response)
            {
                if (response == 1)
                {
                    alert("l'enregistrement existe dans la base de données!");
                }
                else
                {
                    alert("l'enregistrement n'existe pas dans la base de données!");
                }
           }
       });
     });
});
</script>

 

Mettons tous ensemble

Voici donc à quoi ressemble votre fichier form.html.

<form id="my_form">
<input type="text" name="nom" id="name">
<input type="submit" name="search" id="btn_search">
</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
     //lorsqu'on soumit notre formulaire
    $('#my_form').submit(function(e) {
        //Empêcher l'action par défaut de soumission pour n'est pas recharger la page
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: 'check.php',
            data: {'name': $('#name').val()},
            success: function(response)
            {
                if (response == 1)
                {
                    alert("l'enregistrement existe dans la base de données!");
                }
                else
                {
                    alert("l'enregistrement n'existe pas dans la base de données!");
                }
           }
       });
     });
});
</script>
//check.php
<?php
/*

* Connexion à la base de donnée. Avec la configuration par défaut de Mysql (user 'root' with no password)

* N'hésitez pas à l'adapter à votre contexte

*/
$nom = htmlspecialchars($_POST['name']);
try {
$pdo = new PDO("mysql:host=localhost:3306;dbname=tutorial", "root", "");
} catch (PDOException $exception) {
die('ERROR: Impossible de se connecter: '.$exception->getMessage());
}

try {
$sql = "SELECT * FROM my_table WHERE nom LIKE '%$nom%'";
$result = $pdo->query($sql);
if ($result->rowCount() > 0) {
echo 1;
} else {
echo 0;
}

} catch (Exception $exception) {
die("Impossible d'éxecuter la requête");
}

Mot de la fin

Ainsi s’achève notre tutoriel sur AJAX avec PHP et Jquery. Si vous avez des problèmes, n’hésitez pas à me signaler en mettant un commentaire. Je serai ravi de vous répondre

2 commentaires sur “Ajax avec PHP & Jquery”

  1. Abned dit :

    Merci de votre blog Jess!
    Je trouve que ce tuto est préférable.
    Est ce que vous pouvez separez les deux (front: jquery, back: php) dans des domaines différents car il y des erreurs qui me font plus de mâle dedans?
    Merci 🙂

    1. admin dit :

      Je comprend pas. Vous voulez un tuto pour chacun?

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *