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.

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

Webseiten schneller machen
Webseitenbesucher sind ungeduldig, um Besucher und Suchmaschinen bei der Stange zu halten, darf Ihre Website keine Zeit verlieren.
Audio-Player
Mit diesem Audio-Player kann man Audio-Dateien über JavaScript steuern.
Mit PHP schreiben und lesen
Hier möchte ich an Beispielen zeigen, wie eine .txt-Datei mit PHP erstellt wird und wie diese ausgelesen werden kann.
Diese Schlagwörter könnten Sie interessieren:
Event-Kalender Suchmaschine Zeitfunktionen Blätterfunktion EVA-Prinzip Zeichnen Veranstaltungsliste Sprachumschaltung Affenformular Sitemaps-Protokoll Rahmen Metadaten SQLite PHP-Fehlermeldungen Quelltext Seitenformatierung Formulare Silbentrennung Marquee Kommentar-Box