Daten über AJAX und JSON aus einer SQLite-Datenbank auslesen

[Bildschirmfoto] Daten über AJAX und JSON aus einer SQLite-Datenbank auslesen

Auf dieser Seite möchte ich demonstrieren, wie einfach es ist, Daten über AJAX (JavaScript FETCH-API) und JSON aus einer SQLite Datenbank-Datei auslesen und diese in einer HTML-Tabelle auszugeben.

Demo

Die Beschreibung der Funktionsweise finden Sie in den nachfolgenden Quelltexten.

Quelltext:  index.htm 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
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Adressen</title>
    <link rel="stylesheet" href="style.css" />
    <script src="javascript.js"></script>
  </head>
  <body>
    <table id="adressen">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Ort</th>
          <th>Land</th>
          <th>E-Mail</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </body>
</html>

Quelltext:  javascript.js 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
// JS-Funktion erst ausführen, wenn das HTML-Dokument vollständig geladen wurde
window.addEventListener("DOMContentLoaded", () => {
  // URL / Datei der Ressource
  const php_datei = "php.php";

  // fetch() startet den Prozess des Abrufens einer Ressource aus dem Netzwerk
  // Hänge an die URL den Query: '?lesen' an
  fetch(`${php_datei}?lesen`, {
    // Anforderungsmethode 'GET'
    method: "GET",
  })
    // Antwort als JSON-Objekt übergeben
    .then((antwort) => antwort.json())
    .then((adressen) => {
      // HTML-Tabellenkörper erstellen
      let tbody = "";

      // 'adressen' (JSON-Objekt) über eine forEach()-Schleife auslesen
      adressen.forEach((adresse) => {
        // Tabellenzeile mit den einzelnen Werten füllen
        tbody += ` <tr>
          <td> ${adresse.id} </td>
          <td> ${adresse.name} </td>
          <td> ${adresse.ort} </td>
          <td> ${adresse.land} </td>
          <td> ${adresse.mail} </td>
         </tr>`;
      });

      // Tabellenkörper in die HTML-Tabelle einfügen
      document
        .querySelector("#adressen tbody")
        .insertAdjacentHTML("beforeend", tbody);
    });
});

Quelltext:  php.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
<?php
// Pfad zur SQLite Datenbank-Datei
$datenbank = __DIR__ . "/db/adressen.db";

// Datenbank-Datei erstellen wenn diese nicht existiert
if (!file_exists($datenbank)) {

    $db = new PDO('sqlite:' . $datenbank);

    // PDO::exec — Ausführung einer SQL-Anweisung
    $db->exec("CREATE TABLE `adressen`(
      id INTEGER PRIMARY KEY,
      name TEXT,
      ort TEXT,
      land TEXT,
      mail TEXT)");
} else {

    // Verbindung herstellen
    $db = new PDO('sqlite:' . $datenbank);
}

// Auslesen
// Wurde über die URL '?=lesen' gesendet
if (isset($_GET["lesen"])) {

    // PDO::query - Ausführung einer SQL-Anweisung (gibt die Ergebnisse eines SELECT-Statements zurück).
    $select = $db->query("SELECT `id`, `name`, `ort`, `land`, `mail` FROM `adressen`");

    // PDO::FETCH_ASSOC - Gibt ein Array zurück, das nach dem Spaltennamen indiziert ist.
    $adressen = $select->fetchAll(PDO::FETCH_ASSOC);

    // Das Array als JSON-Darstellung formatieren (json_encode()) und ausgeben.
    exit(json_encode($adressen));
}

Quelltext:  style.css 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
/* Tabelle formatieren */
table#adressen {
  border-spacing: 4px;
  font-family: Verdana, Tahoma, Arial, sans-serif;
  font-size: 1em;
}

/* Rahmen der Tabellenspalten */
table#adressen th,
table#adressen td {
  color: rgb(0, 0, 0);
  outline: 0.5px solid rgb(100, 100, 100);
  padding: 2px;
  transition: background-color 0.3s;
}

/* Tabellenkopf einfärben */
table#adressen > thead > tr > th {
  background-color: rgba(174, 213, 243, 0.8);
}

/* Tabellenzeilen einfärben */
table#adressen tr:nth-child(even) {
  background-color: rgba(211, 228, 241, 0.8);
}

table#adressen tr:nth-child(odd) {
  background-color: rgba(255, 255, 255, 0.8);
}

/* Tabellenspalten einfärben */
table#adressen th:nth-child(even),
table#adressen td:nth-child(even) {
  background-color: rgba(219, 236, 248, 0.4);
}

/* Tabellenzeile bei Hover einfärben */
table#adressen > tbody > tr:hover {
  background-color: rgba(162, 208, 243, 0.8);
}

/* Tabellenspalte bei Hover einfärben */
table#adressen td:hover {
  background-color: rgba(135, 199, 247, 0.8);
}

Demo herunterladen

ajax_json_sqlite.zip

Tipps

Zum befüllen der SQLite Datenbank-Datei (adressen.db) habe ich das kostenlose Programm DB Browser for SQLite verwendet.

Wer selbst ein Formular zum eintragen und bearbeiten der Daten erstellen möchte, der findet unter: SQLite-Datei mit PHP und PDO erstellen weitere Informationen. Eine Liste der Seiten auf meiner Website, die sich mit dem Thema SQLite befassen, befindet sich hier.

Mit dem Thema JSON, befassen sich die Seiten Mit JSON Daten zwischen JavaScript und PHP austauschen und Daten über eine Auswahlliste in ein Formular laden. Über AJAX (JavaScript FETCH-API / XMLHttpRequest) finden Sie hier eine Liste mit Beispielen.