AJAX kann zur interaktiven Kommunikation mit einer Datenbank verwendet werden.
Das folgende Beispiel zeigt, wie eine Webseite abgerufen werden kann Informationen aus einer Datenbank mit AJAX:
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<style>
th,td {
padding: 5px;
}
</style>
<body>
<h2>The XMLHttpRequest Object</h2>
<form action="">
<select name="customers" onchange="showCustomer(this.value)">
<option value="">Select a customer:</option>
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
</form>
<br>
<div id="txtHint">Customer info will be listed here...</div>
<script>
function showCustomer(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
}
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("txtHint").innerHTML = this.responseText;
}
xhttp.open("GET", "getcustomer.php?q="+str);
xhttp.send();
}
</script>
</body>
</html>
Wenn ein Benutzer einen Kunden in der Dropdown-Liste oben auswählt, wird eine Funktion namens showCustomer()
ausgeführt. Der Die Funktion wird durch das Ereignis onchange
ausgelöst:
function showCustomer(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
}
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("txtHint").innerHTML = this.responseText;
}
xhttp.open("GET", "getcustomer.php?q="+str);
xhttp.send();
}
Die Funktion showCustomer()
führt Folgendes aus:
Überprüfen Sie, ob ein Kunde ausgewählt ist
Erstellen Sie ein XMLHttpRequest-Objekt
Erstellen Sie die Funktion, die ausgeführt werden soll, wenn die Serverantwort bereit ist
Senden Sie die Anfrage an eine Datei auf dem Server
Beachten Sie, dass der URL ein Parameter (q) hinzugefügt wird (mit dem Inhalt der Dropdown-Liste).
Die vom oben genannten JavaScript aufgerufene Seite auf dem Server ist eine PHP-Datei mit dem Namen „getcustomer.php“.
Der Quellcode in „getcustomer.php“ führt eine Abfrage in einer Datenbank aus und gibt das Ergebnis in einem HTML-Code zurück Tisch:
<?php
$mysqli = new mysqli("servername", "username",
"password", "dbname");
if($mysqli->connect_error) {
exit('Could not connect');
}
$sql = "SELECT customerid, companyname,
contactname, address, city, postalcode, country
FROM customers WHERE
customerid = ?";
$stmt = $mysqli->prepare($sql);
$stmt->bind_param("s", $_GET['q']);
$stmt->execute();
$stmt->store_result();
$stmt->bind_result($cid,
$cname, $name, $adr, $city, $pcode, $country);
$stmt->fetch();
$stmt->close();
echo "<table>";
echo "<tr>";
echo "<th>CustomerID</th>";
echo
"<td>" . $cid . "</td>";
echo "<th>CompanyName</th>";
echo "<td>" . $cname
. "</td>";
echo "<th>ContactName</th>";
echo "<td>" . $name . "</td>";
echo "<th>Address</th>";
echo "<td>" .
$adr . "</td>";
echo "<th>City</th>";
echo "<td>" . $city . "</td>";
echo "<th>PostalCode</th>";
echo "<td>" .
$pcode . "</td>";
echo "<th>Country</th>";
echo "<td>" . $country .
"</td>";
echo "</tr>";
echo "</table>";
?>