Detaillierte Erläuterung der Schritte zum Lesen von JSON mit jQuery-js-Tutorial-php.cn

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

php中世界最好的语言

Freigeben： 2018-04-23 14:24:56

Original

1760 Leute haben es durchsucht

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])

Nach dem Login kopieren

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

Nach dem Login kopieren

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>getJSON获取数据</title> 
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> 
<style type="text/css"> 
#pframe{ border:1px solid #999; width:500px; margin:0 auto;} 
.loadTitle{ background:#CCC; height:30px;} 
</style> 
< script type = "text/javascript" > 
$(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"] + "<br>";
        strHtml += "性别：" + info["sex"] + "<br>";
        strHtml += "邮箱：" + info["email"] + "<br>";
        strHtml += "<hr>" 
      }) 
	  $jsontip.html(strHtml);
      //显示处理后的数据 
    }) 
  }) 
})
</script> 
</head> 
<body> 
<p id="pframe"> 
<p class="loadTitle"> 
<input type="button" value="获取数据" id="btn"/> 
</p> 
<p id="jsonTip"> 
</p> 
</p> 
</body> 
</html>

Nach dem Login kopieren

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

Nach dem Login kopieren

Implementierungscode zum Abrufen von JSON geladen haben Daten über Ajax

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>通过ajax获取json数据的实现代码</title>
<script type="text/javascript" src="//www.jb51.net/jslib/jquery/jquery.min.js"></script>
</head>
<body>
<p id="ok"></p>
<script>
$(function () {
    $.ajax({
      type: "POST",
      dataType: "json",
      url: "da.json",
      success: function (result) {
        var str = "";
				$.each(result,function(index,obj){				
				str += "<a href=&#39;" + obj["url"] + "&#39; target=&#39;_blank&#39;><img src=&#39;" + obj["img"] + "&#39; /></a>";					
				});
        $("#ok").append(str);
      }
    });
});
</script>
</body>
</html>

Nach dem Login kopieren

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>通过$.getJSON获取json的代码</title>
<script type="text/javascript" src="//www.jb51.net/jslib/jquery/jquery.min.js"></script>
</head>
<body>
<p id="ok"></p>
<script>
$(function(){ 
$.getJSON("da.json",function(data){ 
var $jsontip = $("#ok"); 
var strHtml = "";//存储数据的变量 
$jsontip.empty();//清空内容 
$.each(data,function(infoIndex,info){
	strHtml += "<a href=&#39;" + info["url"] + "&#39; target=&#39;_blank&#39;><img src=&#39;" + info["img"] + "&#39; /></a>";
}) 
$jsontip.html(strHtml);//显示处理后的数据 
}) 
}) 
</script>
</body>
</html>

Nach dem Login kopieren

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!