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 va montrer comment une page Web peut récupérer des informations à partir d'une base de données avec AJAX:
Exemple
Person info will be listed here...
Exemple Explication - La base de données MySQL
Le tableau de base de données que nous utilisons dans l'exemple ci-dessus ressemble à ceci:
| Identifiant | Prénom | LastName | Âge | Ville d'origine | Emploi |
|---|---|---|---|---|---|
| 1 | Peter | Griffon | 41 | Palourdes | Brasserie |
| 2 | Lois | Griffon | 40 | Newport | Pianiste |
| 3 | Joseph | Swanson | 39 | Palourdes | Officier de police |
| 4 | Glenn | Bourbier | 41 | Palourdes | Pilote |
Exemple Explication - La page HTML
Lorsqu'un utilisateur sélectionne un utilisateur dans la liste déroulante ci-dessus, une fonction appelée "showuser ()" est exécuté. La fonction est déclenchée par l'"onchange" événement:
<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="">Select a person:</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 id="txtHint"><b>Person info will be listed here.</b></div>
</body>
</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="">Select a person:</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 id="txtHint"><b>Person info will be listed here.</b></div>
</body>
</html>
Le showuser () fait ce qui suit:
- Vérifiez si une personne est sélectionnée
- Créer un objet XMLHttpRequest
- Création de la fonction à exécuter lorsque la réponse du serveur est prêt
- Envoyer la demande hors d'un fichier sur le serveur
- Avis 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é par le code JavaScript ci-dessus est un fichier PHP appelé "getuser.php".
Le code source dans "getuser.php" exécute une requête sur une base de données MySQL, et retourne le résultat dans un tableau HTML:
<?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("ajax_demo", $con);
$sql="SELECT * FROM user WHERE id = '".$q."'";
$result = mysql_query($sql);
echo "<table border='1'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";
while($row = mysql_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>";
mysql_close($con);
?>
$q=$_GET["q"];
$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("ajax_demo", $con);
$sql="SELECT * FROM user WHERE id = '".$q."'";
$result = mysql_query($sql);
echo "<table border='1'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";
while($row = mysql_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>";
mysql_close($con);
?>
Explication: Lorsque la requête est envoyée à partir du JavaScript dans le fichier PHP, ce qui suit se produit:
- PHP ouvre une connexion à un serveur MySQL
- La bonne personne se trouve
- Un tableau HTML est créé, rempli de données, et renvoyé à la "txtHint" espace réservé
Heya i'm for the first time here. I came across this board and I find It really useful & it helped me out a lot. I hope to give something back and aid others like you helped me.
ReplyDeleteReview my blog; maids for hire
If you are going for most excellent contents like
ReplyDeletemyself, simply pay a visit this site daily because it gives quality contents, thanks
hardwood floors installation
Here is my page ... hardwood flooring