이 글에서는 jQuerygetJSON 메소드를 사용하여 json 데이터를 얻는 방법을 주로 소개하고, json 파일 데이터를 읽고 탐색하는 getJSON 메소드의 관련 기술을 완전한 예제 형식으로 분석합니다. 도움이 필요한 친구는 참고할 수 있습니다. 이 문서의 예제에서는 jQuery 사용을 설명합니다. getJSON 메서드는 json 데이터를 가져옵니다. 참조용으로 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.
demo.js:
[ { "name":"吴者然", "sex":"男", "email":"demo1@123.com" }, { "name":"吴中者", "sex":"男", "email":"demo2@123.com" }, { "name":"何开", "sex":"女", "email":"demo3@123.com" } ]
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>getJSON获取数据</title> <script type="text/javascript" src="js/jquery-1.10.1.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/demo.js",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>
여기에서 변경하세요. JSON의 접미사 이름을 JS로 지정하면 WEB 컨테이너에 배치하면 정상적으로 읽을 수 있습니다.
위 내용은 getJSON 메소드를 사용하여 json 데이터 인스턴스를 얻는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!