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 démontre comment une page web peut récupérer des informations d'une base de données avec AJAX :

Exemple

Les informations de la personne seront affichées ici...

Exemple expliqué - La base de données MySQL

La table de base de données utilisée dans l'exemple ci-dessus ressemble à ceci :

id	Prénom	Nom de famille	Âge	Ville natale	Métier
1	Peter	Griffin	41	Quahog	Brasserie
2	Lois	Griffin	40	Newport	Professeur de piano
3	Joseph	Swanson	39	Quahog	Policier
4	Glenn	Quagmire	41	Quahog	Pilote

Exemple expliqué

Dans l'exemple ci-dessus, lorsque l'utilisateur sélectionne une personne dans la liste déroulante, une fonction appelée showUser() est exécutée.

La fonction est déclenchée par l'événement onchange .

Voici le code HTML :

Exemple

<html> <head> <script> function showUser(str) { if (str == "") { document.getElementById("txtHint").innerHTML = ""; return; } else { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("txtHint").innerHTML = this.responseText; } }; xmlhttp.open("GET","family.php?q="+str,true); xmlhttp.send(); } } </script> </head> <body> <form> <select name="users" onchange="showUser(this.value)"> <option value="">Sélectionnez une personne:</option> <option value="1">Peter Griffin</option> <option value="2">Lois Griffin</option> <option value="3">Joseph Swanson</option> <option value="4">Glenn Quagmire</option> </select> </form> <br> <div id="txtHint"><b>Les informations de la personne seront affichées ici...</b></div> </body> </html>

Exécuter l'exemple »

Explication du code :

Tout d'abord, vérifiez si une personne est sélectionnée. Si aucune personne n'est sélectionnée (str == ""), effacez le contenu de txtHint et quittez la fonction. Si une personne est sélectionnée, procédez comme suit :

Créez un objet XMLHttpRequest
Créez la fonction à exécuter lorsque la réponse du serveur est prête
Envoyez la requête à un fichier sur le serveur
Remarquez qu'un paramètre q est ajouté à l'URL (avec le contenu de la liste déroulante)

Le fichier PHP

La page sur le serveur appelée par le JavaScript ci-dessus est un fichier PHP nommé family.php .

Le code source dans family.php exécute une requête contre une base de données MySQL et renvoie le résultat dans un tableau HTML :

$q = intval($_GET['q']); $con = mysqli_connect('localhost','peter','abc123'); if (!$con) { die('Impossible de se connecter: ' . mysqli_error($con)); } mysqli_select_db($con,"ajax_demo"); $sql="SELECT * FROM user WHERE id = '".$q."'"; $result = mysqli_query($con,$sql); echo "<table> <tr> <th>Prénom</th> <th>Nom de famille</th> <th>Âge</th> <th>Ville natale</th> <th>Métier</th> </tr>"; while($row = mysqli_fetch_array($result)) { echo "<tr>"; echo "<td>" . $row['FirstName'] . "</td>"; echo "<td>" . $row['LastName'] . "</td>"; echo "<td>" . $row['Age'] . "</td>"; echo "<td>" . $row['Hometown'] . "</td>"; echo "<td>" . $row['Job'] . "</td>"; echo "</tr>"; } echo "</table>"; mysqli_close($con);

Explication : Lorsque la requête est envoyée du JavaScript au fichier PHP, les étapes suivantes se produisent :

PHP ouvre une connexion à un serveur MySQL
La bonne personne est trouvée
Un tableau HTML est créé, rempli de données, et renvoyé au placeholder txtHint