jQuery로 json을 읽는 단계에 대한 자세한 설명-JS 튜토리얼-php.cn

jQuery로 json을 읽는 단계에 대한 자세한 설명

php中世界最好的语言

풀어 주다： 2018-04-23 14:24:56

원래의

1731명이 탐색했습니다.

이번에는 jQuery에서 json을 읽는 단계에 대해 자세히 설명하겠습니다. jQuery에서 json을 읽는 주의사항은 무엇인가요? 아래는 실제 사례입니다.

json 파일은 가벼운 데이터 상호 작용 형식입니다. 일반적으로 jquery에서는 getJSON() 메서드를 사용하여 읽습니다.

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

로그인 후 복사

url: 로드된 페이지 주소
data: 선택 사항, 서버로 전송되는 데이터, 형식은 키/값입니다.
callback: 선택 사항, 성공적으로 로드된 후 실행되는 콜백 함수
1 먼저 JSON 형식 파일을 만듭니다. userinfo.json은 사용자 정보를 저장합니다.

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

로그인 후 복사

2. 둘째, JSON 파일에서 사용자 정보 데이터를 가져오는 페이지를 생성하고

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

로그인 후 복사

를 표시합니다. 이후에 콘텐츠를 자동으로 로드하려는 경우 여기에서 Script House의 편집자가 계속 공유합니다. loading (그림 및 하이퍼링크)

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

로그인 후 복사

ajax를 통해 json 데이터를 얻는 구현 코드

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

로그인 후 복사

$.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>

로그인 후 복사

를 통해 json을 얻는 코드rrreee

아래 그림과 같은 효과가 나옵니다. , 이는 코드에 문제가 없음을 의미합니다.