PHP - AJAX und MySQL

AJAX kann verwendet werden, um interaktiv mit einer Datenbank zu kommunizieren.

AJAX-Datenbank-Beispiel

Das folgende Beispiel zeigt, wie eine Webseite Informationen über AJAX aus einer Datenbank lesen kann:

SQL-Datei für die in diesem Tutorial verwendete Websites-Tabelle: websites.sql.

Beispiel


Wählen Sie eine Option aus, und die Website-Informationen werden hier angezeigt...


Beispiel erklärt - MySQL-Datenbank

Im obigen Beispiel ist die Datenbanktabelle, die wir verwenden, unten dargestellt:

mysql> select * from websites;
+----+--------------+---------------------------+-------+---------+
| id | name         | url                       | alexa | country |
+----+--------------+---------------------------+-------+---------+
| 1  | Google       | https://www.google.cm/    | 1     | USA     |
| 2  | 淘宝       | https://www.taobao.com/   | 13    | CN      |
| 3  | Example | http://www.example.com/    | 4689  | CN      |
| 4  | 微博       | http://weibo.com/         | 20    | CN      |
| 5  | Facebook     | https://www.facebook.com/ | 3     | USA     |
+----+--------------+---------------------------+-------+---------+
5 rows in set (0.01 sec)

Beispiel erklärt – HTML-Seite

Wenn der Benutzer oben in der Dropdown-Liste eine Website auswählt, wird eine Funktion namens "showSite()" ausgeführt. Die Funktion wird durch das "onchange"-Ereignis ausgelöst:

Code der Datei test.html:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Beispiel (example.com)</title> <script>
function showSite(str) { if (str=="") { document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) { //IE7+, Firefox, Chrome, Opera, Safari-Browser führen Code aus xmlhttp=new XMLHttpRequest(); } else { //IE6, IE5 Browser führen Code aus xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","getsite_mysql.php?q="+str,true); xmlhttp.send(); }
</script> </head> <body> <form> <select name="users" onchange="showSite(this.value)"> <option value="">Wählen Sie eine Website:</option> <option value="1">Google</Option> <Option Wert="2">Taobao</option> <option value="3">Beispiel</option> <option value="4">Weibo</option> <option value="5">Facebook</option> </select> </form> <br> <div id="txtHint"><b>Die Website-Informationen werden hier angezeigt...</b></div> </body> </html>

Die Funktion showSite() führt die folgenden Schritte aus:

  • Prüfen, ob eine Website ausgewählt ist
  • Erstellen Sie ein XMLHttpRequest-Objekt
  • Erstellen einer Funktion, die ausgeführt wird, wenn die Serverantwort bereit ist
  • Eine Anfrage an eine Datei auf dem Server senden
  • Beachten Sie, dass ein Parameter (q) am Ende der URL hinzugefügt wird (der den Inhalt der Dropdown-Liste enthält)

PHP-Datei

Die oben über JavaScript aufgerufene serverseitige Seite ist eine PHP-Datei namens "getsite_mysql.php".

Der Quellcode in "getsite_mysql.php" führt eine Abfrage gegen eine MySQL-Datenbank aus und gibt das Ergebnis in einer HTML-Tabelle zurück:

Code der Datei getsite_mysql.php:

<?php $q = isset($_GET["q"]) ? intval($_GET["q"]) : ''; if(empty($q)) { echo 'Bitte wählen Sie eine Website aus'; exit; } $con = mysqli_connect('localhost','root','123456'); if (!$con) { die('Verbindung konnte nicht hergestellt werden: ' . mysqli_error($con)); } //Datenbank auswählen mysqli_select_db($con⟧test,"test"); //Kodierung festlegen, um verstümmelte chinesische Zeichen zu verhindern mysqli_set_charset($con, "utf8"); $sql="SELECT * FROM Websites WHERE id = '".$q."'"; $result = mysqli_query($con,$sql); echo "<table border='1'> <tr> <th>ID</th> <th>Website-Name</th> <th>Website-URL</th> <th>Alexa-Ranking</th> <th>Land</th> </tr>"; while($row = mysqli_fetch_array($result)) { echo "<tr>"; echo "<td>" . $row['id'] . "</td>"; echo "<td>" . $row['name'] . "</td>"; echo "<td>" . $row['url'] . "</td>"; echo "<td>" . $row['alexa'] . "</td>"; echo "<td>" . $row['country'] . "</td>"; echo "</tr>"; } echo "</table>"; mysqli_close($con); ?>

Erklärung: Wenn die Abfrage von JavaScript an die PHP-Datei gesendet wird, geschieht Folgendes:

  1. PHP öffnet eine Verbindung zu einer MySQL-Datenbank
  2. Die ausgewählte Website finden
  3. Erstellt eine HTML-Tabelle, füllt sie mit Daten und sendet sie an den Platzhalter "txtHint" zurück
Andere Erweiterungen