Get json file data through Ajax in Jquery, and get json through jqueryajax

Get json file data through Ajax in Jquery, and get json through jqueryajax

1. JSON (JavaScript Object Notation): javaScript Object Notation;

It is a syntax for storing and exchanging text information, which is smaller, faster, and easier to parse than xml.

2. Basic JSON writing format: Name/value pair. Example: "Student": "Tom"

The Json value can be:

For example (object): {"name": "tom", "age": 23}

(Array ):

1 {2 "Zhang San": [3 {"surname": "Zhang"}, 4 {"name", "3"}, 5 {"age ", 23} 6] 7}

 

Note: ① writing a JSON array is similar to writing a String array in java. It is worth noting that JSON is a name/value pair.

② The string format is double quotation marks, which cannot be used as single or double quotation marks in JavaScript.

③ No matter the array or object, the last value cannot be followed by a comma. Otherwise, a problem may occur.

After testing JSON data in the Google browser console, neither ② nor ③ will report any errors and can be read. However, when I use ajax in jquery to obtain data in the JSON file, an error may occur. The specific cause cannot be answered.

 

The following is the debugging result on the Google browser Console (note that none of the above ② and ③ are met ).

 

The basic call to json data is the call to arrays and objects.

 

3. Obtain the Json file using a specific example.

Create a. json file.

{"List": [{"name": "c", "url": "demo2.html" },{ "name": "list22", "url ": "demo2.html" },{ "name": "list33", "url": "demo2.html" },{ "name": "list44", "url ": "demo2.html" },{ "name": "list55", "url": "demo2.html" },{ "name": "list66", "url ": "demo2.html"}], "list1": [{"name": "I am the second ul 1", "url": "demo2.html" },{ "name ": "I am the second ul 2", "url": "demo2.html" },{ "name": "I am the second ul 3", "url ": "demo2.html" },{ "name": "I am the second ul 4", "url": "demo2.html" },{ "name ": "I am the second ul 5", "url": "demo2.html" },{ "name": "I am the second ul 6", "url ": "demo2.html"}]}

 

Write in html:

<! DOCTYPE html> 
 
View:

Figure 3-1


Figure 3-2
 
The final effect is as follows:

The temperament ul list can also be set based on other Css styles to achieve more beautiful results.