说明:由于是第一个小例子,所以在命名和规范方面多有缺陷,请谅解。
HTML代码如下:
<!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>json传值测试</title>
<script src="jquery.js" type="text/javascript"></script>
<script>
$(function(){
$("#test").click (function(){
$.getJSON('tablejsontest.json',function(data){
$('#name').empty();
var html = '';
$.each(data,function(nameIndex,name){
html +='<tr><td>' + name['name'] + '</td><td >' + name['sex'] + '</td><td>' + name['school'] + '</td></tr>';
})
$('#name').html(html);
})
})
})
</script>
</head>
<body>
<table border="1" id="name">
</table>
<button id="test" value="test" type="button">test</button>
</body>
</html>
json数据如下:(文件名为:tablejsontest.json)
[
{
"name":"anna",
"sex":"女",
"school":"第一中学"
},
{
"name":"jon",
"sex":"man",
"school":"第三中学"
}
]
当网页运行完毕后会有一个名为test的按钮,点击即可查看内容