浅析ajax请求json数据并用js解析(示例分析)

首先写客户端的html代码

复制代码 代码如下:

<table>
<thead>
<tr>
<td>学号</td>
<td>姓名</td>
<td>班别</td>
<td>性别</td>
<td>电话</td>
</tr>
</thead>
<tbody></tbody>
</table>
<input id="btnget" type="button" value="加载数据" />

js代码
复制代码 代码如下:

$(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 {
border-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\":\"13800138000\"},{\"id\":\"2010324256\",\"name\":\"李四\",\"cla\":\"10网络\",\"sex\":\"女\",\"tel\":\"10010\"},{\"id\":\"2010324264\",\"name\":\"张三\",\"tel\":\"10086\"}]";
context.Response.Write(data);

这里我直接把json数据写好格式了。一般来说是需要从数据库把数据读取出来然后拼凑成json格式,或者可以使用别人写好的一些序列化成json数据的类,当然,我更建议你自己写一个,生成一个类库方便以后使用。

如果需要解释一下json是什么,它是和xml等等一些数据并列的一种数据格式,形如:[{"id":"1","name":"张三","age":"20"},{"id":"2","name":"李四","age":"18"}]这样的格式。

相关文章

$.AJAX()方法中的PROCESSDATA参数 在使用jQuery的$.ajax()方...
form表单提交的几种方式 表单提交方式一:直接利用form表单提...
文章浏览阅读1.3k次。AJAX的无刷新机制使得在注册系统中对于...
文章浏览阅读1.2k次。 本文将解释如何使用AJAX和JSON分析器在...
文章浏览阅读2.2k次。/************************** 创建XML...
文章浏览阅读3.7k次。在ajax应用中,通常一个页面要同时发送...