JSON-Server

Inhaltsverzeichnis

Eine häufige Verwendung von JSON ist der Datenaustausch zu/von einem Webserver.

Beim Empfang von Daten von einem Webserver handelt es sich bei den Daten immer um eine Zeichenfolge.

Analysieren Sie die Daten mit JSON.parse() und die Daten werden zu einem JavaScript-Objekt.

Daten senden

Wenn Sie Daten in einem JavaScript-Objekt gespeichert haben, können Sie das Objekt konvertieren in JSON umwandeln 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;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Convert a JavaScript object into a JSON string, and send it to the server.</h2>

<script>
const myObj = { name: "John", age: 31, city: "New York" };
const myJSON = JSON.stringify(myObj);
window.location = "demo_json.php?x=" + myJSON;
</script>

</body>
</html>

Daten empfangen

Wenn Sie Daten im JSON-Format erhalten, können Sie diese problemlos in JavaScript konvertieren Objekt:

Beispiel

 const myJSON =
  '{"name":"John", 
  "age":31, "city":"New York"}';
const myObj = 
  JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Convert a JSON string into a JavaScript object.</h2>

<p id="demo"></p>

<script>
const myJSON = '{"name":"John", "age":31, "city":"New York"}';
const myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;
</script>

</body>
</html>

JSON von einem Server

Sie können JSON mithilfe einer AJAX-Anfrage vom Server anfordern

Solange die Antwort vom Server im JSON-Format geschrieben ist, ist dies möglich Analysieren Sie die Zeichenfolge in ein JavaScript-Objekt.

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();

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Fetch a JSON file with XMLHttpRequest</h2>
<p id="demo"></p>

<script>
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();
</script>

</body>
</html>

Schauen Sie sich json_demo.txt an: https://basicit.org/js/json_demo.txt

Array als JSON

Wenn Sie JSON.parse() für JSON verwenden, das von einem Array abgeleitet ist, wird die Methode dies tun Gibt ein JavaScript-Array anstelle eines JavaScript-Objekts zurück.

Beispiel

JSON wird von einem Server als Array zurückgegeben:

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();

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Fetch a JSON file with XMLHttpRequest</h2>
<p>Content written as an JSON array will be converted into a JavaScript array.</p>
<p id="demo"></p>

<script>
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();
</script>

</body>
</html>

Schauen Sie sich json_demo_array.txt an: https://basicit.org/js/json_demo_array.txt