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

Verzeichnis auslesen und mit einem Link verknüpfen
Beispiele wie ein Verzeichnis (Ordner) über PHP ausgelesen und mit einem Link verknüpft wird.
Floodsperre
Um das Flooden (= Zumüllen mit großen Mengen meist sinnlosen Inhalts) von Foren und Gästebüchern etc. zu erschweren oder um zu verhindern das nach dem absenden des Formulars und drücken der F5-Taste (Seite neu laden) die Daten nochmals eingetragen werden, kann die hier vorgestellte Floodsperre einen Schutz bieten.
Audio-Player
Mit diesem Audio-Player kann man Audio-Dateien über JavaScript steuern.
Diese Schlagwörter könnten Sie interessieren:
Quelltext Fotoalbum Mauszeiger Marquee Lokaler Webserver Zeitbalken Counter Dateibrowser Veranstaltungsliste Zeichenkodierung Zugriffsrechte MySQL Metadaten Sicherheit Responsiv Wecker PHP-Fehlermeldungen Zeitansage Suchmaschine Blätterfunktion