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 AusblendenKopierenLinkZeilen

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 AusblendenKopierenLinkZeilen

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 AusblendenKopierenLinkZeilen

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 AusblendenKopierenLinkZeilen

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-spacing4px;
  
font-familyVerdanaTahomaArialsans-serif;
  
font-size1em;
}

/* Rahmen der Tabellenspalten */
table#adressen th,
table#adressen td {
  
colorrgb(000);
  
outline0.5px solid rgb(100100100);
  
padding2px;
  
transitionbackground-color 0.3s;
}

/* Tabellenkopf einfärben */
table#adressen > thead > tr > th {
  
background-colorrgba(1742132430.8);
}

/* Tabellenzeilen einfärben */
table#adressen tr:nth-child(even) {
  
background-colorrgba(2112282410.8);
}

table#adressen tr:nth-child(odd) {
  
background-colorrgba(2552552550.8);
}

/* Tabellenspalten einfärben */
table#adressen th:nth-child(even),
table#adressen td:nth-child(even) {
  
background-colorrgba(2192362480.4);
}

/* Tabellenzeile bei Hover einfärben */
table#adressen > tbody > tr:hover {
  
background-colorrgba(1622082430.8);
}

/* Tabellenspalte bei Hover einfärben */
table#adressen td:hover {
  
background-colorrgba(1351992470.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.

HTML-Tabelle sortieren - Die Tabelle kann durch klicken auf die Spaltenüberschrift, absteigend oder aufsteigend sortiert werden. HTML-Tabelle filtern - Die Tabelle kann nach Wörtern oder Zahlen gefiltert werden.