客户端HTML代码:
<table>
<thead>
<tr>
<td>学号</td>
<td>姓名</td>
<td>班级</td>
<td>性别</td>
<td>电话</td>
</tr>
</thead>
<tbody></tbody>
<input id="btnget" type="button" value="加载数据" />
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="text/css"> table{ boeder-collapse:collapse; } table td{ text-align:center; border:1px solid gray; padding: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);