PHP - AJAX et MySQL

AJAX peut être utilisé pour communiquer de manière interactive avec une base de données.

Exemple de base de données AJAX

L'exemple suivant montre comment une page web peut lire des informations à partir d'une base de données via AJAX :

Fichier SQL pour la table Websites utilisée dans ce tutoriel:websites.sql.

Exemple


Sélectionnez une option, et les informations du site web s'afficheront ici...


Explication de l'exemple - Base de données MySQL

Dans l'exemple ci-dessus, la table de base de données que nous utilisons est affichée ci-dessous :

mysql> select * from websites;
+----+--------------+---------------------------+-------+---------+
| id | name         | url                       | alexa | country |
+----+--------------+---------------------------+-------+---------+
| 1  | Google       | https://www.google.cm/    | 1     | USA     |
| 2  | 淘宝       | https://www.taobao.com/   | 13    | CN      |
| 3  | Example | http://www.example.com/    | 4689  | CN      |
| 4  | 微博       | http://weibo.com/         | 20    | CN      |
| 5  | Facebook     | https://www.facebook.com/ | 3     | USA     |
+----+--------------+---------------------------+-------+---------+
5 rows in set (0.01 sec)

Exemple expliqué - Page HTML

Lorsque l'utilisateur sélectionne un site web dans la liste déroulante ci-dessus, une fonction appelée "showSite()" est exécutée. La fonction est déclenchée par l'événement "onchange" :

Code du fichier test.html :

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Exemple (example.com)</title> <script>
function showSite(str) { if (str=="") { document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) { //les navigateurs IE7+, Firefox, Chrome, Opera, Safari exécutent le code xmlhttp=new XMLHttpRequest(); } else { //les navigateurs IE6, IE5 exécutent le code xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","getsite_mysql.php?q="+str,true); xmlhttp.send(); }
</script> </head> <body> <form> <select name="users" onchange="showSite(this.value)"> <option value="">Sélectionnez un site web :</option> <option value="1">Google</option> <option value="2">Taobao</option> <option value="3">Exemple</option> <option value="4">Weibo</option> <option value="5">Facebook</option> </select> </form> <br> <div id="txtHint"><b>Les informations du site web seront affichées ici...</b></div> </body> </html>

La fonction showSite() effectue les étapes suivantes :

  • Vérifier si un site web est sélectionné
  • Créer un objet XMLHttpRequest
  • Créer une fonction à exécuter lorsque la réponse du serveur est prête
  • Envoyer une requête à un fichier sur le serveur
  • Notez qu'un paramètre (q) est ajouté à la fin de l'URL (contenant le contenu de la liste déroulante)

Fichier PHP

La page serveur appelée via JavaScript ci-dessus est un fichier PHP nommé "getsite_mysql.php".

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

Code du fichier getsite_mysql.php :

<?php $q = isset($_GET["q"]) ? intval($_GET["q"]) : ''; if(empty($q)) { echo 'Veuillez sélectionner un site web'; exit; } $con = mysqli_connect('localhost','root','123456'); if (!$con) { die('Impossible de se connecter : ' . mysqli_error($con)); } //Sélectionner la base de données mysqli_select_db($con,"test"); //Définir l'encodage pour éviter les caractères chinois corrompus mysqli_set_charset($con, "utf8"); $sql="SELECT * FROM Websites WHERE id = '".$q."'"; $result = mysqli_query($con,$sql); echo "<table border='1'> <tr> <th>ID</th> <th>Nom du site Web</th> <th>URL du site Web</th> <th>Classement Alexa</th> <th>Pays</th> </tr>"; while($row = mysqli_fetch_array($result)) { echo "<tr>"; echo "<td>" . $row['id'] . "</td>"; echo "<td>" . $row['name'] . "</td>"; echo "<td>" . $row['url'] . "</td>"; echo "<td>" . $row['alexa'] . "</td>"; echo "<td>" . $row['country'] . "</td>"; echo "</tr>"; } echo "</table>"; mysqli_close($con); ?>

Explication : Lorsque la requête est envoyée depuis JavaScript vers le fichier PHP, voici ce qui se produit :

  1. PHP ouvre une connexion à une base de données MySQL
  2. Trouver le site web sélectionné
  3. Crée un tableau HTML, le remplit de données et le renvoie à l'espace réservé "txtHint"
Autres extensions