文章为你免费提供二款jquery读取网页特效on文件二款实例代码，这些代码非常实用哦
json文件:
[
{
"name":"xujun",
"sex":"男",
"home":"nanjing"
},
{
"name":"jack",
"sex":"男",
"home":"beijing"
}
]html文件：
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www111cn.net/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 末页