PHP und AJAX MySQL-Datenbankbeispiel

AJAX kann zur interaktiven Kommunikation mit Datenbanken verwendet werden.

AJAX-Datenbank-Beispiel

In dem folgenden AJAX-Beispiel zeigen wir, wie eine Webseite AJAX-Technologie verwendet, um Informationen aus einer MySQL-Datenbank abzurufen.

Wählen Sie einen Kunden aus der Dropdown-Liste aus


Hier werden Kundeninformationen aufgelistet.

Diese Anwendung besteht aus vier Elementen:

  • MySQL-Datenbank
  • Ein einfaches HTML-Formular
  • JavaScript
  • PHP-Seite

Datenbank

Die in diesem Beispiel verwendete Datenbank sieht so aus:

id Kunden-ID Firmenname Kontaktname Adresse Stadt Postleitzahl Land
1 Alibaba Alibaba Group Ma Yun ...... Hangzhou 310002 China
2 APPLE Apple Inc. Tim Cook ...... Cupertino 95014 USA
3 BAIDU BAIDU Inc. Li YanHong ...... Beijing 100080 China
4 Canon Canon USA Inc. Tsuneji Uchida ...... New York 11042 USA

Beispiel Erklärung

Im obigen Beispiel wird die Funktion "showUser()" aufgerufen, wenn der Benutzer einen Kunden aus der obigen Auswahlliste wählt.

Diese Funktion wird durch das onchange-Ereignis ausgelöst.

Dies ist HTML-Code：

Beispiel

<!doctype html>
<html>
<head>
<script>
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 (this.readyState==4 && this.status==200) {
      document.getElementById("txtHint").innerHTML=this.responseText;
    }
  }
  xmlhttp.open("GET","/demo/getcustomer.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Bitte wählen Sie einen Kunden：</option>
<option value="1">Alibaba</option>
<option value="2">APPLE</option>
<option value="3">BAIDU</option>
<option value="4">Canon</option>
<option value="5">Google</option>
<option value="6">HUAWEI</option>
<option value="7">Microsoft</option>
<option value="8">Nokia</option>
<option value="9">SONY</option>
<option value="10">Tencent</option>
</select>
</form>
<br>
<div id="txtHint"><b>Die Kundeninformationen werden hier aufgelistet.</b></div>
</body>
</html>

Läuftes Beispiel

Code-Explainierung:

Zunächst überprüfen Sie, ob ein Kunde ausgewählt wurde. Wenn kein Kunde ausgewählt wurde (str == ""), löschen Sie den Inhalt von txtHint und beenden Sie die Funktion. Wenn ein Kunde ausgewählt wurde, führen Sie die folgenden Aktionen aus:

  • Erstellen Sie das XMLHttpRequest-Objekt
  • Erstellen Sie die Funktion, die beim Bereitsein der Serverantwort ausgeführt wird
  • Senden Sie die Anfrage an die Datei auf dem Server
  • Beachten Sie, dass das Parameter (q) der URL hinzugefügt wird (mit dem Inhalt der Dropdown-Liste)

PHP-Datei

Die aufgerufene Serverseite ist eine PHP-Datei namens "getuser.php".

Der Quellcode in "getuser.php" führt eine Abfrage an der MySQL-Datenbank durch und gibt die Ergebnisse in einer HTML-Tabelle zurück:

<?php
$q = intval($_GET['q']);
$con = mysqli_connect('MyServer','MyUser','MyPassword','Customers');
if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
}
$sql="SELECT * FROM customerslist WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);
echo "<table>";
while($row = mysqli_fetch_array($result)) {
    echo "<tr><th>CustomerID</th><td>" . $row['CustomerID'] . "</td></tr>";
    echo "<tr><th>Firmenname</th><td>" . $row['CompanyName'] . "</td></tr>";
    echo "<tr><th>Kontaktname</th><td>" . $row['ContactName'] . "</td></tr>";
    echo "<tr><th>Adresse</th><td>" . $row['Address'] . "</td></tr>";
    echo "<tr><th>Stadt</th><td>" . $row['City'] . "</td></tr>";
    echo "<tr><th>Postleitzahl</th><td>" . $row['PostalCode'] . "</td></tr>";
    echo "<tr><th>Land</th><td>" . $row['Country'] . "</td></tr>";
}
echo "</table>";
mysqli_close($con);
?>

Erklärung: Wenn eine Abfrage von JavaScript an eine PHP-Datei gesendet wird, tritt folgendes ein:

  • PHP öffnet die Verbindung zum MySQL-Server
  • Der richtige Kunde wurde gefunden
  • Erstellen Sie ein HTML-Table, füllen Sie Daten ein und senden Sie es zurück mit dem Platzhalter "txtHint"