您的位置：首页 > Web前端 > JavaScript

使用getJSON方法读取json文件数据并处理

2011-06-30 00:22 986 查看

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script src="jquery-1.3.2.js"></script>

<script>
$(function(){
$("#loaddata").click(function(){
//使用getJSON方法读取json数据,
//注意：info.json可以是不同类型文件，只要其中的数据为json类型即可
$.getJSON('info.json',function(data){
var html = '';
$.each(data,function(i,item){
html += '<tr><td>'+item['name']+'</td>'+
'<td>'+item['sex']+'</td>'+
'<td>'+item.address+'</td>'+
'<td>'+item['home']+'</td></tr>';
});
$('#title').after(html);
//after方法:在每个匹配的元素之后插入内容。
});
});
});

//注:可以是item.address,也可以是item['address']
//firefox报 json文件中 “语法错误 [”,单能加载数据
//ie chrome 无法加载数据
</script>
</HEAD>
<input type="button" value="加载数据" id="loaddata" />

<BODY>
<table id="infotable" >
<tr id="title"><th>姓名</th><th>性别</th><th>地址</th><th>主页</th></tr>
</table>
</BODY>
</HTML>

json文件内容

[
{
"name":"zhangsan",
"sex":"man",
"address":"hangzhou",
"home":"http://www.zhangsan.com"
},
{
"name":"lisi",
"sex":"wumen",
"address":"beijing",
"home":"http://www.lisi.com",
}
]

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航