Suchanfrage an eine Datenbank über AJAX senden und empfangen

[Bildschirmfoto] 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 Datenbank-Tabelle ausliest) und die Ergebnisse auf der gleichen Seite ausgibt. Das ist dann deutlich schneller als eine Seite komplett zu laden und der Benutzer muss nicht lange warten.

Dabei ist AJAX ein Objekt für die Programmiersprache JavaScript. Ein Objekt, das der clientseitigen Skriptsprache erlaubt, auf 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.

Quelltext:  frage.php Einblenden ❘ Kopieren ❘ Link ❘ Zeilen ❘

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.php Einblenden ❘ Kopieren ❘ Link ❘ Zeilen ❘

Ein moderner Ansatz

Die Welt ist rund und diese hat sich weitergedreht, 4 Jahre seitdem die oberen Scripte geschrieben wurden (2019) sind vergangen, das ist in der Welt der Programmierung eine halbe Ewigkeit. Besonders im JavaScript-Teil würde ich heutzutage einiges anders und meiner Meinung nach auch besser machen. Nachfolgend finden Sie einen moderneren Ansatz.

Um das ganze kompakter zu halten, habe ich den HTML-, JavaScript- und PHP-Teil in eine einzelne Datei geschrieben. Anders als im oberen JavaScript, werden die Daten nicht per: GET sondern mit: POST (Hermes vs. DHL 😉) gesendet.

Die JavaScript: Fetch-API stellt eine Schnittstelle zum Abrufen von Ressourcen bereit. Es wird jedem bekannt vorkommen, der XMLHTTPRequest verwendet hat (siehe oben), aber diese API bietet einen leistungsfähigeren und flexibleren Funktionssatz.

Quelltext:  frage_und_antwort.php Ausblenden ❘ Kopieren ❘ Link ❘ Zeilen ❘

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<?php
/*
 * Suchanfrage an eine Datenbank über AJAX senden und empfangen
 */

if (isset($_POST["suche"])) {

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

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

    // Die vorbereitete Anweisung ausführen
    $kommando->execute([':suche' => '%' . $_POST["suche"] . '%']);

    // Datensätze holen
    $datensaetze = $kommando->fetchAll();

    // Überprüfen ob Datensätze gefunden wurden
    if ($kommando->rowCount() > 0) {

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

    // exit, ansonsten wird der HTML-Körper gesendet!
    exit;
}
?>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Suchanfrage an eine Datenbank über AJAX senden und empfangen</title>

    <script>
        // Funktion nach dem laden der Seite aufrufen
        window.addEventListener("DOMContentLoaded", function() {

            // Eventlistener für das Absenden des Formulars registrieren:
            document.getElementsByTagName("button")[0].addEventListener("click", () => {

                // Überprüfen ob im Formular (bei: required) etwas eingegeben wurde
                if (document.getElementsByTagName("form")[0].reportValidity()) {

                    // Die gleiche Datei (document.URL) aufrufen
                    fetch(document.URL, {

                        // Übertragungsmethode: POST
                        method: "POST",

                        // Die Daten des Formulars werden im body übertragen
                        body: new FormData(document.getElementsByTagName("form")[0])

                        // Auf eine Antwort warten
                    }).then(antwort => {

                        // Die Antwort vom Server als Text auswerten
                        return antwort.text();
                    }).then(antwort => {

                        // Antwort vom Server im HTML-Element ausgeben
                        document.getElementsByTagName("div")[0].innerHTML = antwort;
                    });

                }
            });
        });
    </script>

</head>

<body>

    <form>
        <p>
            <label>Suche:
                <input type="search" name="suche" required></label>
            <button type="button">suchen</button>
        </p>
    </form>

    <div></div>

</body>

</html>

DB-Tabelle

Folgende DB-Tabelle wurde im Anwendungsbeispiel verwendet:

CREATE TABLE `tabellenname` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `spalte1` varchar(200) COLLATE utf8mb4_unicode_ci NOT NULL,
  `spalte2` varchar(200) COLLATE utf8mb4_unicode_ci NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;