Detaillierte Erläuterung der Schritte zum Lesen von JSON mit jQuery

Dieses Mal werde ich Ihnen die Schritte zum Lesen von JSON durch jQuery ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für das Lesen von JSON durch jQuery?

JSON-Datei ist ein leichtes Dateninteraktionsformat. Im Allgemeinen wird es mit der Methode getJSON() in jquery gelesen.

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

URL: geladene Seitenadresse
Daten: optional, an den Server gesendete Daten im Schlüssel/Wert-Format
Rückruf: optional, wird nach erfolgreichem Laden ausgeführt Rückruffunktion
1. Erstellen Sie zunächst eine Datei im JSON-Format userinfo.json, um Benutzerinformationen zu speichern. Wie folgt:

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

2. Erstellen Sie zweitens eine Seite, um die Benutzerinformationsdaten in der JSON-Datei abzurufen und anzuzeigen

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

Hier fährt der Editor von Script House fort um es mit Ihnen zu teilen. , wenn Sie Inhalte (Bilder und Hyperlinks) automatisch laden möchten, nachdem Sie

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" }
]

Implementierungscode zum Abrufen von JSON geladen haben Daten über 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

Rufen Sie den JSON-Code über $.getJSON ab

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

Der Effekt wird wie in der Abbildung unten gezeigt angezeigt, was bedeutet, dass der Code in Ordnung ist

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zum Implementieren des Datei-Uploads mit Jquery+LigerUI

Wie man XML liest Dateiinhalt mit jQuery

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zum Lesen von JSON mit jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!