浅析ajax请求json数据并用js解析(示例分析)
来源:互联网 发布:手机取证软件 编辑:程序博客网 时间:2024/05/18 17:43
首先写客户端的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\":\"张三\",\"cla\":\"10软件\",\"sex\":\"男\",\"tel\":\"10086\"}]";
context.Response.Write(data);
这里我直接把json数据写好格式了。一般来说是需要从数据库把数据读取出来然后拼凑成json格式,或者可以使用别人写好的一些序列化成json数据的类,当然,我更建议你自己写一个,生成一个类库方便以后使用。
如果需要解释一下json是什么,它是和xml等等一些数据并列的一种数据格式,形如:[{"id":"1","name":"张三","age":"20"},{"id":"2","name":"李四","age":"18"}]这样的格式。
0 0
- 浅析ajax请求json数据并用js解析(示例分析)
- HttpClient请求数据(GET)并用JSON解析数据(一)
- HttpURLConnection请求数据(GET)并用JSON解析数据(二)
- Pull解析xml文件,并用HttpUtils请求数据接口(示例方法)
- ajax接收json数据到js解析
- 用url请求数据并用pull解析
- Http获取Json数据,并用Gson解析
- ajax请求json数据
- ajax请求json数据
- 网络爬虫之php抓取json,xml,js,html示例分析及数据解析
- jQuery AJAX获取JSON数据解析多种方式示例
- XML与JSON比较,并用AJAX传输XML/JSON数据
- jquery ajax请求对json数据解析的理解
- ajax同步异步请求与JSON数据解析
- struts2+jquery+Ajax异步请求发送与解析json数据
- struts2+jquery+Ajax异步请求发送与解析json数据
- 【Chart.js】通过Ajax请求JSON数据来绘制图表
- ajax跨域请求json数据和js代码
- OpenCV——颜色均匀渐变
- JBOSS简单安装说明
- 图像处理
- mac连接到windows网上邻居
- yii2 目录结构
- 浅析ajax请求json数据并用js解析(示例分析)
- 强大的web打印功能
- 项目经理必备的两大能力
- JMX实现远程服务器Tomcat系统监控之一
- 本地用自定义域名方式访问项目
- devstack安装脚本结构及stack.sh简介
- 需求变更流程不规范,项目早晚得完蛋
- 关于“ERROR/Database(279): sqlite3_open_v2("/data/data/xxx.xxx.xxx/mydb", &handle, 6, N ”问题的解决方法
- PHP实现UTF-8文件BOM自动检测与移除实例