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