jquery读取json文件二款实例代码(1/2)

文章为你免费提供二款jquery读取网页特效on文件二款实例代码，这些代码非常实用哦，是二款完整的jquery读取json格式文件代码哦。

json文件:

[
{
"name":"xujun",
"sex":"男",
"home":"nanjing"
},
{
"name":"jack",
"sex":"男",
"home":"beijing"
}
]

html文件：
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://wwwzzzyk.com/tr/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>insert title here</title>
<script src="../jquery.js"></script>
<script>
$(document).ready(function(){
$.getjson('jsondata.json?id',function(data){
//遍历json中的每个entry

$.each(data,function(entryindex,entry){
var html='<tr>';
html+='<td>'+entry['name']+'</td>';
html+='<td>'+entry['sex']+'</td>';
html+='<td>'+entry['home']+'</td>';
html+='</tr>';
$('#title').after(html);

});
});
});
</script>
</head>
<body>
<table>
<tr id="title">
<th>姓名</th>
<th>性别</th>
<th>家庭地址</th>
</tr>
</table>
</body>
</html>

实例二

<!doctype html public "-//w3c//dtd html 4.01//en" " http://www.w3.org/tr/html4/strict.dtd ">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>json document</title>
<script type="text/网页特效" src="lib/jquery/jquery-1.3.2.js"></script>
<script type="text/javascript">
   $(function(){
    $("#button").click(function(){
     $.getjson( b.json ,function(data){ // getjson方法获得json文件的代码，其中的回调函数的参数data就是json代码
      $("#json").empty(); //清空带“json” id的div标签的内容
      $.each(data,function(entryindex,entry){ //each方法遍历json文件中的对象，entryindex是当前索引， entry是当前项
       var html="<div class= entry >";
       html += "<h3 class= term >"+entry[ term ]+ </h3> ;
       html += "<div class= part >"+entry[ part ]+"</div>";
       html += "<div class= definition >"+entry[ definition ];
       if(entry[ quote ]){
        html+="<div class= quote >";
        $.each(entry[ quote ],function(quoteindex,line){
         html+="<p>"+line+"</p>";
        });
        html+="</div>";
       }
       html+="</div>";
       html +="</div>";
       $("#json").append(html);
      });
     });
    });
   });
</script>
</head>
<body>
<div id="button"><b>get json document</b></div>
<div id="json"></div>
</body>
</html>

1 2

补充：网页制作,jquery