Explication détaillée des étapes pour lire json avec jQuery-js tutoriel-php.cn

Explication détaillée des étapes pour lire json avec jQuery

php中世界最好的语言

Libérer： 2018-04-23 14:24:56

original

1730 Les gens l'ont consulté

Cette fois, je vais vous apporter une explication détaillée des étapes à suivre pour que jQuery lise json. Quelles sont les précautions pour que jQuery lise json Voici un cas pratique, jetons un coup d'œil.

Le fichier json est un format léger d'interaction de données. Généralement, il est lu à l'aide de la méthode getJSON() dans jquery.

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

Copier après la connexion

url : adresse de la page chargée
données : facultatives, données envoyées au serveur, au format clé/valeur
rappel : facultatif, exécuté après un chargement réussi Fonction de rappel
1. Créez d'abord un fichier au format JSON userinfo.json pour enregistrer les informations utilisateur. Comme suit :

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

Copier après la connexion

2. Deuxièmement, créez une page pour obtenir les données d'informations utilisateur dans le fichier JSON et affichez-les

<!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>

Copier après la connexion

Ici, l'éditeur de Script House continuera. pour le partager avec vous, si vous souhaitez charger automatiquement le contenu (images et hyperliens) après le chargement de

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

Copier après la connexion

Code d'implémentation pour l'obtention de json. données via 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>

Copier après la connexion

Obtenez le code json via $.getJSON

<!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>

Copier après la connexion

L'effet apparaîtra comme indiqué dans la figure ci-dessous, ce qui signifie que le code est OK

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes pour implémenter le téléchargement de fichiers avec Jquery+LigerUI

Comment lire XML contenu du fichier avec jQuery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!