Base de données AJAX
AJAX peut être utilisé pour communiquer de manière interactive avec la base de données.
Exemple de base de données AJAX
L'exemple suivant montrera comment une page Web lit les informations de la base de données via AJAX :
Exemple
Explication des exemples - Base de données MySQL
dans Dans l'exemple ci-dessus, la table de base de données que nous utilisons est la suivante :
| 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 |
Explication de l'exemple - Page HTML
Lorsque l'utilisateur est au-dessus Lorsqu'un utilisateur est sélectionné dans la liste déroulante, une fonction nommée "showUser()" est exécutée. Cette fonction est déclenchée par l'événement "onchange" :
<html>
<head>
<script>
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// 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>la fonction showUser() effectuera les étapes suivantes :
vérifier si un utilisateur est sélectionné
Crée un objet XMLHttpRequest
Crée une fonction qui s'exécute lorsque la réponse du serveur est prête
-
Envoyer une requête au fichier sur le serveur
Veuillez noter le paramètre (q) ajouté à la fin de l'URL (contenant le contenu du liste déroulante)
Fichier PHP
La page du serveur appelée ci-dessus via JavaScript est un fichier PHP nommé "getuser.php".
Le code source dans "getuser.php" exécute une requête sur la base de données MySQL et renvoie les résultats dans un tableau HTML :
<?php
$q=$_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 border='1'>
<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);
?>Explication : Lorsqu'une requête est envoyée depuis JavaScript vers un fichier PHP, ce qui se passe est :
PHP ouvre une connexion à la base de données MySQL
La sélection est trouvée. Les utilisateurs
créent des tableaux HTML, remplissent des données et renvoient des espaces réservés "txtHint"
Recommandations de didacticiels vidéo connexes ：《Tutoriel AJAX》http://www.php.cn/course/list/25.html
