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

Favicon erstellen - Ihr Logo in den Lesezeichen (Favoriten)
Das Favoriten Icon wird bei einem Bookmark in die Favoritenliste aufgenommen. Dort erscheint zukünftig die „gebookmarkte” Webseite mit einem eigenen Symbol.
Sitemaps-Protokoll für Suchmaschinen automatisch erstellen
Sorgen Sie dafür, dass die Nutzer auf einen größeren Teil Ihrer Website aufmerksam werden mit einem „Sitemaps-Protokoll”. Dies stellt eine einfache Möglichkeit für Webmaster dar, Suchmaschinen Seiten auf Ihrer Website zu melden, die zum durchsuchen verfügbar sind.
Verzeichnis auslesen und mit einem Link verknüpfen
Beispiele wie ein Verzeichnis (Ordner) über PHP ausgelesen und mit einem Link verknüpft wird.
Diese Schlagwörter könnten Sie interessieren:
Zugriffsrechte Formulare Rahmen Mauszeiger Quelltext Fotoalbum Sortierung Chatroom Silbentrennung Key Codes Diashow Berechnungen RSS Feed Blätterfunktion CSS-Counter Veranstaltungsliste Zeitfunktionen Zeitansage Favicon Operatoren