PHP - AJAX en MySQL
AJAX kan worden gebruikt voor interactieve communicatie met een database.
Voorbeeld van een AJAX-database
Het volgende voorbeeld laat zien hoe een webpagina informatie uit een database kan halen met AJAX:
Voorbeeld
Voorbeeld uitgelegd - De MySQL-database
De databasetabel die we in het bovenstaande voorbeeld gebruiken, ziet er als volgt uit:
| 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 |
Voorbeeld uitgelegd
In het bovenstaande voorbeeld, wanneer een gebruiker een persoon selecteert in de vervolgkeuzelijst hierboven, wordt een functie genaamd "showUser()" uitgevoerd.
De functie wordt geactiveerd door de gebeurtenis onchange.
Hier is de HTML-code:
Voorbeeld
<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>
Code uitleg:
Controleer eerst of de persoon is geselecteerd. Als er geen persoon is geselecteerd (str == ""), wis dan de inhoud van txtHint en verlaat de functie. Als een persoon is geselecteerd, doet u het volgende:
- Een XMLHttpRequest-object maken
- Maak de functie die moet worden uitgevoerd wanneer de serverreactie gereed is
- Stuur het verzoek naar een bestand op de server
- Merk op dat een parameter (q) is toegevoegd aan de URL (met de inhoud van de vervolgkeuzelijst)
Het PHP-bestand
De pagina op de server die door het bovenstaande JavaScript wordt aangeroepen, is een PHP-bestand met de naam "getuser.php".
De broncode in "getuser.php" voert een query uit op een MySQL-database en retourneert het resultaat in een HTML-tabel:
<!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>Uitleg: Wanneer de query vanuit het JavaScript naar het PHP-bestand wordt verzonden, gebeurt het volgende:
- PHP opent een verbinding met een MySQL-server
- De juiste persoon is gevonden
- Er wordt een HTML-tabel gemaakt, gevuld met gegevens en teruggestuurd naar de tijdelijke aanduiding "txtHint"