Spécifie la taille du texte
AJAX peut être utilisé pour la communication interactive avec une base de données, AJAX exemple de base de données
AJAX peut être utilisé pour la communication interactive avec une base de données.
L'exemple suivant démontrera comment une page web peut extraire des informations d'une base de données avec AJAX :
La table de base de données que nous utilisons dans l'exemple qui suit, ressemble à ceci :
| ID | Prenom | Nom | age | Ville natale | Emploi |
|---|---|---|---|---|---|
| 1 | Peter | Griffin | 41 | Paris | Brasserie |
| 2 | Lois | Griffin | 40 | Nice | Professeur de piano |
| 3 | Joseph | Swanson | 39 | Paris | Officier de police |
| 4 | Glenn | Bourbier | 42 | Paris | Pilote |
Pour pouvoir suivre l’exemple avec nous, vous devez créer la base de données que vous nommez : `ajax_exemple`
Puis voici la requête pour créer la table ‘user’ que nous allons utiliser pour l’exemple :
Code SQL
Exemple : Copier le code
-- -- Voici la requête pour créer la table `user` --structure de la table CREATE TABLE IF NOT EXISTS `user` ( `ID` int(10) NOT NULL AUTO_INCREMENT, `Prenom` text NOT NULL, `Nom` text NOT NULL, `Age` int(8) NOT NULL, `VilleNatale` text NOT NULL, `Emploi` text NOT NULL, PRIMARY KEY (`ID`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=5; -- -- Ci après la requête pour remplir la table `user` -- vous pouvez ajouter vos propre enregistrements si vous voulez -- INSERT INTO `user` (`ID`, `Prenom`, `Nom`, `Age`, `VilleNatale`, `Emploi`) VALUES (1, 'Peter', 'Griffin', 41, 'Paris', 'Brasserie'), (2, 'Lois', 'Griffin', 40, 'Nice', 'Professeur de piano'), (3, 'Joseph', 'Swanson', 39, 'Paris', 'Officier de police'), (4, 'Glenn', 'Bourbier', 42, 'PAris', 'Pilote');
Lorsqu'un utilisateur sélectionne un utilisateur 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 » :
Exemple : Copier le code
<html>
<head>
<script type="text/javascript">
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
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 (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Sélectionner une personne:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
<br />
<div><b>Tableau résultats trouvés :</b><br /><br />
<span id="txtHint"></span>
</div>
</body>
</html>
La fonction showUser() effectue les opérations suivantes :
La page sur le serveur appelé 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:
Exemple : Copier le code
<?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'root', '');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("ajax_exemple", $con);
$sql="SELECT * FROM user WHERE id = '".$q."'";
$result = mysql_query($sql);
echo "<table border='1'>
<tr>
<th>Prénom</th>
<th>Nom</th>
<th>Age</th>
<th> Ville natale </th>
<th>Emploi</th>
</tr>";
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['Prenom'] . "</td>";
echo "<td>" . $row['Nom'] . "</td>";
echo "<td>" . $row['Age'] . "</td>";
echo "<td>" . $row['VilleNatale'] . "</td>";
echo "<td>" . $row['Emploi'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysql_close($con);
?>
Explication : Lorsque la requête est envoyée par le JavaScript ajax dans le fichier PHP, ce qui suit arrive :
Télécharger les fichiers de l'exemple
|
Cours precedent: Exemple AJAX PHP |
Sommaire de : Le langage JavaScript |
Cours suivant: Fichier XML de AJAX |