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 récupérer des informations à partir d'une base de données avec AJAX :
Exemple
Exemple expliqué - La base de données MySQL
La table de base de données que nous utilisons dans l'exemple ci-dessus ressemble à ceci :
| id | FirstName | LastName | Age | Hometown | Job |
|---|---|---|---|---|---|
| 1 | Peter | Griffin | 41 | Quahog | Brewery |
| 2 | Lois | Griffin | 40 | Newport | Piano Teacher |
| 3 | Joseph | Swanson | 39 | Quahog | Police Officer |
| 4 | Glenn | Quagmire | 41 | Quahog | Pilot |
Exemple expliqué
Dans l'exemple ci-dessus, lorsqu'un utilisateur sélectionne une personne dans la liste déroulante ci-dessus, 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","getuser.php?q="+str,true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</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>Person info will be listed here...</b></div>
</body>
</html>
Explication du code :
Tout d'abord, vérifiez si la 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éer un objet XMLHttpRequest
- Créer la fonction à exécuter lorsque la réponse du serveur est prête
- Envoyer la demande vers un fichier sur le serveur
- Notez 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 appelé "getuser.php".
Le code source de "getuser.php" exécute une requête sur une base de données MySQL et renvoie le résultat dans un tableau HTML :
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
padding: 5px;
}
th {text-align: left;}
</style>
</head>
<body>
<?php
$q = intval($_GET['q']);
$con = mysqli_connect('localhost','peter','abc123','my_db');
if (!$con) {
die('Could not connect: ' . 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>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</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);
?>
</body>
</html>Explication : Lorsque la requête est envoyée du JavaScript au fichier PHP, voici ce qui se passe :
- PHP ouvre une connexion à un serveur MySQL
- La bonne personne est trouvée
- Un tableau HTML est créé, rempli de données et renvoyé à l'espace réservé "txtHint"