JSON Foundation and examples

Estimated reading time :10 minute

Disclaimer : I quoted some good pictures or examples with the mentality of transferring knowledge , Original link marked , In case of infringement [email protected] That is, by deleting !

Now I've sorted out some basics (JSON explain profound theories in simple language ) The problem of , One more answer to these questions . secondly , In some difficult places to understand , There are also examples , I hope I can help you ! Don't talk much nonsense , Please look at the catalogue :


JSON Foundation and examples

One ,JSON What is it? ?

Two ,JSON What is it for ?

Three , Why use it JSON?

Four , How to use it JSON?

( One ) JSON Based on two structures

( Two ) JSON The form of

1. object (object)

2. array (array)

3. value (value)

4. character string (string)

5. numerical value (number)

About converting to JS Object problem

Additional content :

AJAX obtain JSON Data in file



( Concept arrangement from JSON Official website :http://www.json.org.cn/ <http://www.json.org.cn/>)

One ,JSON What is it? ?

JSON Is a lightweight data exchange format .

Two ,JSON What is it for ?

JSON Is the format used to store and transfer data .

JSON It is usually used to transfer data from server to web page .

Three , Why use it JSON?

Easy to read and write .

It is convenient for machine analysis and generation .

JSON Adopt text format independent of program language , But it also uses the habits of common programming languages . These characteristics make JSON Become the ideal data exchange language .

Four , How to use it JSON?

( One ) JSON Based on two structures

1.“ name / value ” Set of pairs (A collection of name/value pairs)

In different programming languages , It is understood as an object (object), Record (record), structure (struct), Dictionaries (dictionary), Hashtable (hash
table), Key list (keyed list), Or associative array (associative array).

2. An ordered list of values (An ordered list of values).

In most languages , It is implemented as an array (array), vector (vector), list (list), sequence (sequence).

These are common data structures . at present , Most programming languages support them . This makes it possible to exchange data in the same format between various programming languages .

( Two ) JSON The form of

1. object (object)

  It's a disorder “‘ name / value ’ Yes ” aggregate . An object with “{”( Left bracket ) start ,“}”( Right bracket ) end . each “ name ” Follow one “:”( colon );“‘ name / value ’
Yes ” Between “,”( comma ) separate .


example :
<!DOCTYPE html> <html> <head> <meta charset="utf-8">
<title>DJun(blog.csdn.net/qq_41647999)</title> </head> <body> <p> Trade name : <span
id="goodsname"></span><br /> Commodity address : <span id="goodsurl"></span><br /> company slogan:
<span id="goodsslogan"></span> </p> <script> var JSONObject= { "name":" Chinese Cabbage ",
"url":"www.dreamstudio.top", "slogan":" Love knowledge , Transmission technology !" };
document.getElementById("goodsname ").innerHTML=JSONObject.name //
innerHTML stay JS It's a two-way function : Get object content or Insert content into object ; // Here is to the id by goodsname Object insertion for JSONObject.name content
document.getElementById("goodsurl ").innerHTML=JSONObject.url
document.getElementById("goodsslogan ").innerHTML=JSONObject.slogan </script>
</body> </html>
2. array (array)

Is the value (value) Ordered set of . An array with “[”( Left bracket ) start ,“]”( Right bracket ) end . Values “,”( comma ) separate .


example :
var JSONObject ={ "sites": [ { "name":" Rookie course " , "url":"www.runoob.com" }, {
"name":"google" , "url":"www.google.com" }, { "name":" micro-blog " ,
"url":"www.weibo.com" } ] }
The method of calling the web page is the same as the above example .

3. value (value)

It can be a string enclosed in double quotation marks (string), numerical value (number),true,false, null
, object (object) Or arrays (array). These structures can be nested .

4. character string (string)

Is any number enclosed by double quotation marks Unicode A collection of characters , Escape with backslash . One character (character) A single string (character string).

JSON String of (string) And C perhaps Java Is very similar .

Here are two functions :

JSON.parse() <http://www.runoob.com/js/javascript-json-parse.html>

Used to put a JSON String to JavaScript object .

JSON.stringify() <http://www.runoob.com/js/javascript-json-stringify.html>

Used to transfer JavaScript Value to JSON character string .


5. numerical value (number)

And C perhaps Java The values are very similar . just JSON The value of is not in octal or hexadecimal format . meanwhile , You can add white space between any tag .

About converting to JS Object problem

Use built-in JavaScript eval() The method is used to analyze JSON Data to generate native Javascript object .

Come here ,JSON That's the end of the basics . If you have studied AJAX The words of , You can take a look at the following contents ~

Additional content :

AJAX obtain JSON Data in file

( Instance from :https://www.cnblogs.com/zhangyongl/p/6399955.html

[ { "name":" Zhang Guoli ", "sex":" male ", "email":"[email protected]", "url":"./img/1.jpg"
}, { "name":" Zhang Tielin ", "sex":" male ", "email":"[email protected]", "url":"./img/2.jpg"
}, { "name":" Deng Jie ", "sex":" female ", "email":"[email protected]", "url":"./img/3.jpg" },
{ "name":" Zhang Guoli ", "sex":" male ", "email":"[email protected]", "url":"./img/4.jpg" },
{ "name":" Zhang Tielin ", "sex":" male ", "email":"[email protected]", "url":"./img/5.jpg" },
{ "name":" Deng Jie ", "sex":" female ", "email":"[email protected]", "url":"./img/6.jpg" } ]
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title
here</title> <meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <script
type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <style
type="text/css"> .p1{ font-size: 14px; color: #000; } .p2{ font-size: 12px;
color: #b0b0b0; } .p3{ font-size: 14px; color: #ff5f19; } .product{ width:100%;
position: relative; margin: 20px 0 5px 0; height: 100px; background: #fafafa; }
.img{ width: 100px; height: 100px; float: left; margin-right: 20px; } .p{
display:inline-block; float:left; width:50%; margin-top:6px; font-family:
Microsoft YaHei; } .p1{ margin-top:16px; } </style> <script> // Page loading Get all information
$(function(){ $.ajax({ type: "POST",// Request method url: "item.json",// address , namely json The request path for the file
dataType: "json",// The data type can be text xml json script jsonp           success:
function(result){// The parameters returned are action All of them have get and set Parameters of the method addBox(result); } });
/*$.get("item.json",function(result){ //result Add data to box In the container ; addBox(result);
});*/ }); function addBox(result){ //result It's a collection , So we need to traverse first
$.each(result,function(index,obj){ $("#box").append("<div
class='product'>"+// Get image address "<div><img class='img' src="+obj['url']+"/></div>"+
// Get the name "<div class='p1 p'>"+obj['name']+"</div>"+ // Access to gender "<div class='p2
p'>"+obj['sex']+"</div>"+ // Get email address "<div class='p3 p'>"+obj['email']+"</div>"+
"</div>"); }); } </script> </head> <body> <!-- Build a container --> <div id="box">
</div> </body> </html>
design sketch :