Une utilisation courante de JSON consiste à échanger des données vers/depuis un serveur Web.
Lors de la réception de données d'un serveur Web, les données sont toujours une chaîne.
Analysez les données avec JSON.parse()
et les données deviennent un objet JavaScript.
Si vous avez des données stockées dans un objet JavaScript, vous pouvez convertir l'objet en JSON et envoyez-le à un serveur :
const myObj = {name: "John",
age: 31, city: "New York"};
const myJSON =
JSON.stringify(myObj);
window.location = "demo_json.php?x=" + myJSON;
Essayez-le vous-même →
<!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>
Si vous recevez des données au format JSON, vous pouvez facilement les convertir en JavaScript objet:
const myJSON =
'{"name":"John",
"age":31, "city":"New York"}';
const myObj =
JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;
Essayez-le vous-même →
<!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>
Vous pouvez demander JSON au serveur en utilisant une requête AJAX
Tant que la réponse du serveur est écrite au format JSON, vous pouvez analyser la chaîne dans un objet JavaScript.
Utilisez XMLHttpRequest pour obtenir des données du serveur :
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();
Essayez-le vous-même →
<!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>
Jetez un œil à json_demo.txt : https://basicit.org/js/json_demo.txt
Lors de l'utilisation de JSON.parse()
sur JSON dérivé d'un tableau, la méthode renvoie un tableau JavaScript, au lieu d'un objet JavaScript.
JSON renvoyé par un serveur sous forme de tableau :
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();
Essayez-le vous-même →
<!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>
Jetez un œil à json_demo_array.txt : https://basicit.org/js/json_demo_array.txt