使用getJSON方法读取json文件数据并处理-优快云博客

本文介绍如何使用jQuery的getJSON方法从JSON文件中读取数据，并将这些数据动态地填充到HTML表格中。通过按钮点击触发数据加载，演示了如何解析JSON格式的数据并将其转换为表格形式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

转载于:https://www.cnblogs.com/strugglesMen/archive/2011/06/30/2093905.html