客户端HTML代码:
<table>
<thead>
<tr>
<td>学号</td>
<td>姓名</td>
<td>班级</td>
<td>性别</td>
<td>电话</td>
</tr>
</thead>
<tbody></tbody>
<input id=@H_404_77@"btnget" type=@H_404_77@"button" value=@H_404_77@"加载数据" />
javascript代码:
$(function(){
$("#btnget").click(function(){
$.Ajax({
type:"post",dataType:"Json",url:"data.ashx",success:function(msg){
var str="";
for(i in msg){
str+="<tr><td>"+msg[i].id+
"</td><td>"+msg[i].name+
"</td><td>"+msg[i].cla+
"</td><td>"+msg[i].sex+
"</td><td>"+msg[i].tel+
"</td></tr>";
}
$("tbody").append(str);
}
});
});
});
样式部分:
<style type=@H_404_77@"text/css"> table{ boeder-collapse:@H_404_77@collapse; } table td{ text-align:@H_404_77@center; border:@H_404_77@1px solid gray; padding:@H_404_77@3px 10px; } </style>
服务器端返回的json数据代码:
string data=[{\"id\":\"2010324268\",\"name\":\"林宇\",\"cla\":\"10软件\",\"sex\":\"男\",\"tel\":\"***********\"},{\"id\":\"2010324269\",\"name\":\"李四\",\"cla\":\"10网络\",{\"id\":\"2010324270\",\"name\":\"肖玲\",\"sex\":\"女\",\"tel\":\"***********\"}];
context.Response.Write(data);