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

Checkbox (Mehrfachauswahl) und DB-Ausgabe
Mit den Checkboxen lassen sich mehrere Einträge von der DB-Tabelle auswählen, auswerten und ausgeben.
Mit PHP zeichnen - Eine Grafik mit PHP erstellen
Mit den Grafikfunktionen können Sie zur Laufzeit des PHP-Scripts auch Grafiken erzeugen.
Responsives Design
Ob ein großer Monitor, ein Tablet oder Smartphone verwendet wird, das Design der Seite sollte sich automatisch der Größe des Gerätes anpassen.
Diese Schlagwörter könnten Sie interessieren:
MySQL Blätterfunktion Sitemaps-Protokoll Key Codes Responsiv Canvas Linkliste Chatroom Textgestaltung Operatoren Metadaten Seitenformatierung Mimetypen Diashow Zugriffsrechte Datenschutz-Hinweis Zebra-Tabelle Audio-Player Webseitenschutz Favicon