Mit JSON Daten zwischen JavaScript und PHP austauschen

Die JavaScript Object Notation, kurz JSON, ist ein kompaktes Datenformat in einer einfach lesbaren Textform zum Zweck des Datenaustauschs zwischen Anwendungen. In diesem kleinen Beispiel werden serialisierte Daten von PHP zu JavaScript über AJAX gesendet und in Eingabefeldern ausgegeben.

Vereinfachte Darstellung eines JSON-Formats:
{"name":"John Doe", "strasse":"New York, West 16", "mobil":"62294-9584"}

Ein JSON-Objekt beginnt mit einer { (öffnenden geschwungenen Klammer) und endet mit einer } (schließenden geschwungenen Klammer). Jedem Schlüssel folgt ein : (Doppelpunkt) dahinter steht der Wert. Die einzelnen Schlüssel/Wert Paare werden durch , (Komma) voneinander getrennt.

➥ Alle Strings (Zeichenketten) müssen in UTF-8 kodiert sein!

Anwendungsbeispiel

Quelltext  Kopieren ❘ Ausblenden ❘ 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
<!DOCTYPE html>
<html lang="de">
 <head>
  <meta charset="UTF-8">
  <title>JSON - Test</title>

  <script>
  // Ein XMLHTTP-Request-Objekt erzeugen
  var xhr = new XMLHttpRequest();

  // Den HTML-Buttons eine JavaScript-Funktion zuweisen
  window.addEventListener("load", function () {
   var buttons = document.getElementById("buttons").getElementsByTagName('input');
   for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", zeigeDaten);
   }
  });

  function zeigeDaten(event) {
   // Daten über GET senden
   xhr.open("GET", "antwort.php?person=" + event.target.value);
   xhr.send(null);

   // Auf eine Antwort warten
   xhr.onreadystatechange = function () {

   // Daten werden empfangen
   if (xhr.readyState == 4 && xhr.status == 200) {

     // Die Daten in einzelne Objekte zerlegen
     var obj = JSON.parse(xhr.responseText);
     //console.table(obj);

     // Die Eingabefelder mit den Daten befüllen
     document.getElementById("name").value = obj.name;
     document.getElementById("strasse").value = obj.strasse;
     document.getElementById("mobil").value = obj.mobil;
    }
   }
  }
  </script>

 </head>
<body>

<p><label>Name: <input type="text" id="name"></label></p>
<p><label>Straße: <input type="text" id="strasse"></label></p>
<p><label>Mobil: <input type="text" id="mobil"></label></p>

<p id="buttons">
<input type="button" value="John">
<input type="button" value="Mandy">
<input type="button" value="Paul">
<input type="button" value="Sandy">
</p>

</body>
</html>

In diesem Script wird noch window.addEventListener("load", function () {… verwendet, besser ist es jedoch: window.addEventListener("DOMContentLoaded", function () {… zu benutzen, da mit "DOMContentLoaded" bereits früher auf die Objekte der Seite zugegriffen werden kann.

Quelltext „antwort.php”  Kopieren ❘ Ausblenden ❘ 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
<?php
// PHP 5.4+

if (isset($_GET["person"])) {

 switch ($_GET["person"]) {

   case "John":
      // Die Daten werden hier in einem assoziativen Array gespeichert.
      $arr = ['name'=>'John Doe', 'strasse'=>'New York, West 16', 'mobil'=>'62294-9584'];
   break;

   case "Mandy":
      $arr = ['name'=>'Mandy Winter', 'strasse'=>'Oslo, East 122', 'mobil'=>'0180-225598-321'];
   break;

   case "Paul":
      $arr = ['name'=>'Paul Jason', 'strasse'=>'Sidney, South 487', 'mobil'=>'7731-436'];
   break;

   // Default, wenn die passende Person nicht vorhanden ist.
   default:
      $arr = ['name'=>'unbekannt', 'strasse'=>'unbekannt', 'mobil'=>'unbekannt'];

 }

 // Das Array serialisieren und ausgeben
 echo json_encode($arr);
 // Ausgabe-Beispiel:  {"name":"John Doe",  "strasse":"New York, West 16",  "mobil":"62294-9584"}
}
?>

Es gibt mittlerweile in fast allen gängigen Programmiersprachen eine Anbindung bzw. Schnittstelle zu JSON. Diese ist zur heutigen Zeit auch schon sehr oft in der Standard-API vorhanden; json.org (Offizielle Website).

Tipps

Fehler 404 mit .htaccess abfangen
Eine Website wird öfters umgebaut, Seiten kommen hinzu, andere Seiten werden entfernt oder bekommen eine neue Adresse. Eine selbst gestaltete Fehler-Weiterleitungsseite, leitet den Besucher sicher zum Angebot der Webseite.
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.
SQLite-Datei mit PHP und PDO erstellen
Der Vorteil von SQLite ist, das die Datenbank eine Text-Datei ist und keine Verbindung zu einem Datenbank-Server benötigt wird.