Suchanfrage an eine Datenbank über AJAX senden und empfangen

Ohne das die Seite neu geladen werden muss, kann man über JavaScript eine Suchanfrage an eine PHP-Datei senden (die dann eine DB-Tabelle ausliest) und die Ergebnisse auf der gleichen Seite ausgibt.

Dabei ist AJAX ein Objekt für die Programmiersprache JavaScript. Ein Objekt, das der clientseitigen Scriptsprache erlaubt, aus Anwenderereignisse wie Mausklicks im Hintergrund mit einem Webserver zu kommunizieren, PHP-Scripts, Java-Servlets oder andere Prozesse auf dem Server zu starten, auf diese Weise neue Daten von dort anzufordern oder vom Benutzer eingegebene Daten direkt auf dem Server auswerten oder speichern zu lassen. Und all das, ohne eine neue Webseite aufzurufen.

Die Funktionsweise und Bescheibung finden Sie im Quelltext der folgenden Dateien.

QuelltextKopierenAusblendenZeilen

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Suchanfrage an eine Datenbank über AJAX senden und empfangen</title>

  <script>
  // Ein XMLHTTP-Request-Objekt erzeugen.
  var xhr = new XMLHttpRequest();

  function datenSenden() {
   // Den Inhalt des Eingabefeldes auslesen
   var suchbegriff = document.getElementById("eingabe").value;

   // Überprüfen ob der Suchbegriff mehr als 3 Zeichen enthält.
   if (suchbegriff.length > 3) {

    // XMLHTTP-Request zur Datei: antwort.php öffnen und den Suchbegriff anhängen.
    xhr.open("GET", "antwort.php?suchbegriff=" + suchbegriff, true);

    // XMLHTTP-Request senden.
    xhr.send();

    // Auf eine Antwort warten
    xhr.onreadystatechange = function() {

     // Überprüfen ob der Server eine Antwort geliefert hat.
     if (xhr.readyState == 4 && xhr.status == 200) {

      // Die Antwort des Servers ausgeben
      document.getElementById("ausgabe").innerHTML = xhr.responseText;
     }
    }
   }
  }
  </script>


 </head>
<body>

<input type="text" id="eingabe" placeholder="Suchbegriff eingeben">

<button onClick="datenSenden()">suchen</button>

<div id="ausgabe"></div>

</body>
</html>

Suchanfrage ausführen

Die Daten werden mit PDO (PHP Data Objects) aus der Datenbank geholt. PDO stellt eine Abstraktionsebene für den Datenbankzugriff dar und ermöglicht einen einheitlichen Zugang von PHP auf unterschiedliche SQL-basierte Datenbanken.

Quelltext „antwort.phpKopierenAusblendenZeilen

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<?php
// Überprüfen ob über GET gesendet wurde.
if (isset($_GET["suchbegriff"])) {

 
// Den Zeichensatz über header() senden,
 // sonst werden Umlaute ggf. nicht richtig angezeigt.
 
header('Content-Type: text/plain; charset=utf-8');

 
// Eine Verbindung zur Datenbank aufbauen
 
$verbindung = new PDO("mysql:host=localhost;dbname=test""root""");

 
// Anweisung definieren
 
$kommando $verbindung->prepare("SELECT `spalte1`,`spalte2`
                                   FROM `Tabellenname`
                                   WHERE (`spalte1` LIKE :suchbegriff OR
                                          `spalte2` LIKE :suchbegriff)");

  
// Den Platzhalter in der Anweisung mit dem Suchbegriff ersetzen
 
$kommando->bindValue(':suchbegriff''%' $_GET["suchbegriff"] . '%');

 
// Die vorbereitete Anweisung ausführen
 
$kommando->execute();

 
// Datensätze holen
 
$datensaetze $kommando->fetchAll(PDO::FETCH_OBJ);

 
// Überprüfen ob Datensätze gefunden wurden
 
if (count($datensaetze> 0) {

  
// Alle gefundenen Datensätze ausgeben
  
foreach ($datensaetze as $datensatz) {
   echo 
'<p>$datensatz->spalte1 ' - ' $datensatz->spalte2 '</p>';
  }
 }
 else {
  echo 
'Keine Datensätze gefunden!';
 }
}
?>

Tipps

Artikel über Checkboxen auswählen
Hier können Artikel (Bilder) ausgewählt werden die bestimmte Kriterien der Checkboxen erfüllen. Die Daten werden in einer CSV-Datei gespeichert und können individuell angepasst werden.
Formulardaten über AJAX überprüfen und speichern
Ohne lästigen Seitenwechsel werden die eingegebenen Daten im Formular überprüft und gespeichert.
Mit PHP zeichnen - Eine Grafik mit PHP erstellen
Mit den Grafikfunktionen können Sie zur Laufzeit des PHP-Scripts auch Grafiken erzeugen.