HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
A common use of JSON is to exchange data to/from a web server.When receiving data from a web server, the data is always a string.Parse the data with JSON.parse(), and the data becomes a JavaScript object
If you have data stored in a JavaScript object, you can convert the object into JSON, and send it to a server:
const myObj = {name: "John",
age: 31, city: "New York"};
const myJSON =
JSON.stringify(myObj);
window.location = "demo_json?x=" + myJSON;
If you receive data in JSON format, you can easily convert it into a JavaScript object:
const myJSON =
'{"name":"John",
"age":31, "city":"New York"}';
const myObj =
JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;
You can request JSON from the server by using an AJAX request
As long as the response from the server is written in JSON format, you can parse the string into a JavaScript object.
Use the XMLHttpRequest to get data from the server:
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();
Take a look at json_demo.txt
When using the JSON.parse()
on JSON derived from an array, the method will
return a JavaScript array, instead of a JavaScript object.
JSON returned from a server as an array:
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();
Take a look at json_demo_array.txt