JSON-Server
Eine übliche Verwendung von JSON ist der Austausch von Daten zu/von einem Webserver.
Beim Empfangen von Daten von einem Webserver handelt es sich bei den Daten immer um einen String.
Analysieren Sie die Daten mit JSON.parse()
, und die Daten werden zu einem JavaScript-Objekt.
Senden von Daten
Wenn Sie Daten in einem JavaScript-Objekt gespeichert haben, können Sie das Objekt in JSON konvertieren und an einen Server senden:
Beispiel
const myObj = {name: "John",
age: 31, city: "New York"};
const myJSON =
JSON.stringify(myObj);
window.location = "demo_json.php?x=" + myJSON;
Daten empfangen
Wenn Sie Daten im JSON-Format erhalten, können Sie diese einfach in ein JavaScript-Objekt umwandeln:
Beispiel
const myJSON =
'{"name":"John",
"age":31, "city":"New York"}';
const myObj =
JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;
JSON von einem Server
Sie können JSON vom Server anfordern, indem Sie eine AJAX-Anforderung verwenden
Solange die Antwort vom Server im JSON-Format geschrieben ist, können Sie die Zeichenfolge in ein JavaScript-Objekt parsen.
Beispiel
Verwenden Sie XMLHttpRequest, um Daten vom Server abzurufen:
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
const myObj = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myObj.name;
};
xmlhttp.open("GET", "json_demo.txt");
xmlhttp.send();
Sehen Sie sich json_demo.txt an
Array als JSON
Wenn Sie den JSON.parse()
von einem Array abgeleiteten JSON verwenden, gibt die Methode ein JavaScript-Array anstelle eines JavaScript-Objekts zurück.
Beispiel
JSON, das von einem Server als Array zurückgegeben wird:
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
const myArr = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myArr[0];
}
}
xmlhttp.open("GET", "json_demo_array.txt", true);
xmlhttp.send();
Sehen Sie sich json_demo_array.txt an