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
<!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>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" }
]<!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='" + obj["url"] + "' target='_blank'><img src='" + obj["img"] + "' /></a>";
});
$("#ok").append(str);
}
});
});
</script>
</body>
</html><!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='" + info["url"] + "' target='_blank'><img src='" + info["img"] + "' /></a>";
})
$jsontip.html(strHtml);//显示处理后的数据
})
})
</script>
</body>
</html>
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!
