Ajax et PHP et MySQL

PHP, Ajax et MySQL

AJAX peut être utilisé pour une communication interactive avec une base de données.


Exemple de base de données AJAX

L'exemple suivant montre comment une page Web peut extraire des informations d'une base de données avec AJAX :

Exemple expliqué - La base de données MySQL

La table de notre base de données que nous utiliserons dans l'exemple ci-dessous ressemblera à ceci :

id Nom Informations
1 Cheese Miam
2 Double Cheese Miam miam
3 Triple Cheese Miam miam miam
4 Big Mac Top

Exemple expliqué

Dans l'exemple ci-dessous, lorsqu'un utilisateur sélectionne une hamburger dans la liste déroulante, une fonction appelée "MontrerHamburger()" est exécutée.
La fonction est déclenchée par l'événement onchange.
Voici le code HTML du formulaire que nous allons utiliser :

<html>  
   <head>  
   </head>  
   <body>  
      <form>  
         <select name="hamburgers"  onchange="MontrerHamburger(this.value)">  
            <option value="">Selectionner un hamburger :</option>  
            <option value="1">Chesse</option>  
            <option value="2">Double Cheese</option>  
            <option value="3">Trimple Cheese</option>  
            <option value="4">Big Mac</option>  
         </select>  
      </form>  
      <br>  
      <div id="txt">Les informations sur l'hamburger seront listées ici ...</div>  
   </body>  
</html>

Voici le script qui nous permettra de réaliser une interaction avec notre base de données : 

<script>  
      function MontrerHamburger(res){  
         if(res == ""){  
            document.getElementById("txt").innerHTML  =  "";  
            return;  
         }else{  
            if(window.XMLHttpRequest){  
               // code for IE7+, Firefox, Chrome, Opera, Safari  
               xmlhttp = new XMLHttpRequest();  
            }else{  
               // code for IE6, IE5  
               xmlhttp = new  ActiveXObject("Microsoft.XMLHTTP");  
            }  
            xmlhttp.onreadystatechange = function(){  
               if(this.readyState == 4 && this.status == 200){  
                  document.getElementById("txt").innerHTML = this.responseText;  
               }  
            };  
            xmlhttp.open("GET","gethamburger.php?r=" + res,true);  
            xmlhttp.send();  
         }  
      }  
   </script>  
Explication du code :

Tout d'abord, nous vérifions si l'hamburger est sélectionnée. Si aucun hamburger n'est sélectionné (res == ""), alors nous allons effacer le contenu de txt et quittez la fonction. Si un hamburger est sélectionnée, on procédera comme cela :

-   Créer un objet XMLHttpRequest,
-   Créer la fonction à exécuter lorsque la réponse du serveur est prête,
-   Envoyer la demande à un fichier sur le serveur,
-   Notez qu'un paramètre (r) est ajouté à l'URL (avec le contenu de la liste déroulante)


Le fichier PHP

La page sur le serveur appelée par le code JavaScript ci-dessous est un fichier PHP appelé "gethamburger.php".
Le code source de "gethamburger.php" exécute une requête sur notre base de données MySQL et renvoie le résultat dans un tableau HTML :

   <!DOCTYPE html>  
   <html>  
      <head>  
      </head>  
      <body>  
         <?php  
            $r = intval($_GET['r']);  
              $bd = new DB(); 
              
              $req= $db->prepare("SELECT *
                 FROM hamburger
                 WHERE id = ?); 
            $req->execute(array($r));  

            $req = $req->fetchAll();

            echo "<table>  
               <tr>  
               <th>Nom</th>  
               <th>Informations</th>  
               </tr>";  
            foreach($req as $hamb) {  
               echo "<tr>";  
               echo "<td>" . $hamb['nom'] . "</td>";  
               echo "<td>" . $hamb['info'] . "</td>";  
               echo "</tr>";  
            }  
            echo "</table>"; 
         ?>  
      </body>  
   </html>
Explication :

1.  PHP ouvre une connexion à un serveur MySQL,
2.  On fait une requête afin de trouver l'hamburger correcte,
3.  Une table HTML est créée, remplie de données et renvoyée à l’espace réservé "txt".

Par Clouder le 11 Dec 2018
Cette pub permet au site de vivre ...

Commentaire

Tu veux participer ?
Alors connecte toi ou inscris toi et viens participer !