Detailed explanation of the steps to read json with jQuery

This time I will bring you a detailed explanation of the steps for jQuery to read json. What are the precautions for jQuery to read json? The following is a practical case, let's take a look.

json file is a lightweight data interaction format. Generally, it is read using the getJSON() method in jquery.

$.getJSON(url,[data],[callback])

url: Loaded page address
data: Optional, the data sent to the server, the format is key/value
callback: Optional, the callback function executed after successful loading
1. First create a JSON format file userinfo.json to save user information. As follows:

[ 
{ 
"name":"张国立", 
"sex":"男", 
"email":"zhangguoli@123.com" 
}, 
{ 
"name":"张铁林", 
"sex":"男", 
"email":"zhangtieli@123.com" 
}, 
{ 
"name":"邓婕", 
"sex":"女", 
"email":"zhenjie@123.com" 
} 
]

2. Secondly, create a page to obtain the user information data in the JSON file and display

b585974ae3b7dba3039af53a9593f9c4 
383eb734b02b508089ba2d78eb4c6f68 
93f0f5c25f18dab9d176bd4f6de5d30e 
0f3eabac747cdf61a51589c5584ae6e8 
b2386ffb911b14667cb8f0f91ea547a7getJSON获取数据6e916e0f7d1e588d4f442bf645aedb2f 
480fe7165c1ae8bb9007d04f964d73d02cacc6d41bbb37262a98f745aa00fbf0 
46d5fe1c7617e3914f214aaf043f4ccf 
#pframe{ border:1px solid #999; width:500px; margin:0 auto;} 
.loadTitle{ background:#CCC; height:30px;} 
531ac245ce3e4fe3d50054a55f265927 
a2fdb3fea3e55fcdb15c1f63d760d41b 
$(function (){
  $("#btn").click(function ()  {
    $.getJSON("js/userinfo.json", function (data){
      var $jsontip = $("#jsonTip");
      var strHtml = "123";
      //存储数据的变量 
      $jsontip.empty();
      //清空内容 
      $.each(data, function (infoIndex, info){
        strHtml += "姓名：" + info["name"] + "0c6dc11e160d3b678d68754cc175188a";
        strHtml += "性别：" + info["sex"] + "0c6dc11e160d3b678d68754cc175188a";
        strHtml += "邮箱：" + info["email"] + "0c6dc11e160d3b678d68754cc175188a";
        strHtml += "f32b48428a809b51f04d3228cdf461fa" 
      }) 
	  $jsontip.html(strHtml);
      //显示处理后的数据 
    }) 
  }) 
})
2cacc6d41bbb37262a98f745aa00fbf0 
9c3bca370b5104690d9ef395f2c5f8d1 
6c04bd5ca3fcae76e30b72ad730ca86d 
d8751c3712a2410ed497a3c6d5d04bd6 
e9fbe04d6833f4675d0ed026968faf4e 
6f1db2c8036ffd5ab21948937bd911b9 
94b3e26ee717c64999d7867364b1b4a3 
680d8e0f1252925d6e72f6d7aefb1da9 
94b3e26ee717c64999d7867364b1b4a3 
94b3e26ee717c64999d7867364b1b4a3 
36cc49f0c466276486e50c850b7e4956 
73a6ac4ed44ffec12cee46588e518a5e

Here, the editor of Script House will continue to share it with you. If you want to load AfterAutomatic loadingHow to write content (pictures and hyperlinks)

da.json

[
{ "img": "http://files.jb51.net/image/http.gif", "url":"http://www.jb51.net/1" },
{ "img": "http://files.jb51.net/image/jbzj.gif", "url":"http://www.jb51.net/2" },
{ "img": "http://files.jb51.net/image/tengxunyun.jpg", "url":"http://www.jb51.net/3" }
]

Implementation code for obtaining json data through ajax

b585974ae3b7dba3039af53a9593f9c4
383eb734b02b508089ba2d78eb4c6f68
93f0f5c25f18dab9d176bd4f6de5d30e
0f3eabac747cdf61a51589c5584ae6e8
b2386ffb911b14667cb8f0f91ea547a7通过ajax获取json数据的实现代码6e916e0f7d1e588d4f442bf645aedb2f
5a63a370b6ed3a967bedd1a3ad229b6a2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
ffe7a2dc8127b62df87bf3e1aef2b72994b3e26ee717c64999d7867364b1b4a3
3f1c4e4b6b16bbbd69b2ee476dc4f83a
$(function () {
    $.ajax({
      type: "POST",
      dataType: "json",
      url: "da.json",
      success: function (result) {
        var str = "";
				$.each(result,function(index,obj){				
				str += "d8d5bfd7d048baade338bd093b15158ec82ff0ea612a433b5dbe7747d4501db65db79b134e9f6b82c0b36e0489ee08ed";					
				});
        $("#ok").append(str);
      }
    });
});
2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

Passed $.getJSON gets the json code

b585974ae3b7dba3039af53a9593f9c4
383eb734b02b508089ba2d78eb4c6f68
93f0f5c25f18dab9d176bd4f6de5d30e
0f3eabac747cdf61a51589c5584ae6e8
b2386ffb911b14667cb8f0f91ea547a7通过$.getJSON获取json的代码6e916e0f7d1e588d4f442bf645aedb2f
5a63a370b6ed3a967bedd1a3ad229b6a2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
ffe7a2dc8127b62df87bf3e1aef2b72994b3e26ee717c64999d7867364b1b4a3
3f1c4e4b6b16bbbd69b2ee476dc4f83a
$(function(){ 
$.getJSON("da.json",function(data){ 
var $jsontip = $("#ok"); 
var strHtml = "";//存储数据的变量 
$jsontip.empty();//清空内容 
$.each(data,function(infoIndex,info){
	strHtml += "13bab05b0080b5198d2bbc195473721451e33d6a3410c6da2c4de90c13ff54e55db79b134e9f6b82c0b36e0489ee08ed";
}) 
$jsontip.html(strHtml);//显示处理后的数据 
}) 
}) 
2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

The effect will come out as shown in the figure below, which means the code is OK

I believe you have read the case in this article After mastering the method, please pay attention to other related articles on the php Chinese website for more exciting content!

Recommended reading:

Jquery LigerUI implementation of file upload steps detailed explanation

How jQuery reads XML file content

The above is the detailed content of Detailed explanation of the steps to read json with jQuery. For more information, please follow other related articles on the PHP Chinese website!