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!
Demo
Quelltext: 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
<!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>
<style>
body {
background: Whitesmoke;
}
</style>
</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 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
<?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
exit(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
- Zeitansage in JavaScript
- Dieses JavaScript gibt die aktuelle Uhrzeit in Worten aus.
- Kontaktformular - E-Mail mit PHPMailer und SMTP versenden
- Manchmal möchte man die E-Mail vom Kontaktformular über dem PHPMailer und SMTP versenden. Weil das aber nicht so einfach ist und bestimmte Einstellungen beachtet werden müssen, stelle ich hier beispielhaft ein PHP-Skript vor.
- Download-Archiv
- Mit dem Download-Archiv können Sie Bilder, PDF-Dateien, ZIP-Archive und so weiter auf dem Server hochladen. Die Datei-Infos (Dateiname, Beschreibung, Dateigröße und das Datum) werden in einer SQLite-Datenbank gespeichert.
- Grafik als Zeichenkette speichern und wieder als Grafik ausgeben
- Grafiken (Bilder) können problemlos als Zeichenkette gespeichert und wieder ausgelesen werden, wie das genau funktioniert und welchen Sinn es hat erfahren Sie hier.
Abonniere meinen RSS-Feed um über aktuelle Seiten benachrichtigt zu werden.
Geolocation API Kontaktformular Generator Rahmen Veranstaltungsliste Absolute URL Formulare Zeit-Differenz Affenformular Metadaten AES Inhaltsverzeichnis Dateibrowser Formular befüllen Metaphone Mauszeiger Animierte Sternebewertung Datenschutz-Hinweis ASCII Chatroom Zeitansage Operatoren Mnemonisches Passwort Blätterfunktion Audiodatei PHP-Fehlermeldungen