<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/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>
json文件:
[
{
"name":"xujun",
"sex":"男",
"home":"nanjing"
},
{
"name":"jack",
"sex":"男",
"home":"beijing"
}
]
户端用的 $.ajax 这个方法，里面的 datatype:"json" 这样设置的，如果服务端返回的是一个 json 格式的字符串，是不是必须调用 eval 方法来转换为 json 对象
$.ajax({
type: "post",
url: "ajax.asp教程x",
data: "index=5",
datatype: "json",
success:function(data){
alert(data.name);
var person = data.d;
for(var p in person){
}
});
实例三
function btnclick1() {
$.ajax({
url: "json.ashx",
type: "post",
data: { cmd: "getinfo1" },
beforesend: loading,
success: function(data) {
//使用eval函数
var json = eval(data);
$("#dd").empty();
//因为上面为list集合
for (var i = 0; i < json.length; i++) {
$("#dd").append("<h3>用户名：" + json[i].username + " 密码：" + json[i].pwd + "</h3>");
//alert(json[i].id + "name:" + json[i].name);
}
}});
}<div>
<input type="text" name="text1" id="text1" /><br />
<input type="text" name="text2" id="text2" />
<br />
<input type="button" id="btn1" value="事件1" onclick="btnclick()" />
<input type="button" id="button1" value="事件2" onclick="btnclick1()" />
</div>
<div id="dd">
sd
</div>