知识大全 ajax请求json数据并用js解析

Posted 2022-07-20 知

篇首语：你今天的日积月累，早晚会成为别人的望尘莫及。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 ajax请求json数据并用js解析相关的知识，希望对你有一定的参考价值。

这应该是每个web开发的人员都应该掌握的基础技术需要的朋友可以参考下

　　自从接触了jquery就喜欢上了前端开发而且深深感受到了前端开发的强大与重要之处同时也想为asp net鸣不平事实上asp net并没有臃肿说它臃肿的人无非是那些不了解它的人可能他们看见过一些asp net低级程序员在不断往页面里拖控件然后发现生成的页面中含有大量的垃圾代码而且几乎把所有的逻辑处理都写在了服务器端觉得服务器压力太大了事实上刚入门asp net的人会有拖控件的习惯但是当你再深入你会发现最终asp net的开发模式还是跟PHP jsp等其它web开发模式是一样的 PHP是+css+js+PHP语言 asp net是 +css+js+C#语言唯一不同的只是服务器端语言而已（面向开发人员来说）如果看到这里还说asp net很臃肿因为需要 net框架的支持那么为什么不说jsp很臃肿？jsp也需要java虚拟机的支持啊！所有的web开发都是基于客户端发请求服务器端返回数据客户端再处理数据这个模式而且asp net开发模式的好处在于很好地分离了服务器端与客户端的代码不用在里嵌套服务器端的代码——当然这种模式现在已经几乎被各种web开发采用了

　　扯远了我们今天要掌握的很少我比较喜欢用很少的代码来写demo 这样大家比较容易掌握（内容有点低级大神请绕道）

　　我们建一个这样的web项目

　　首先写客户端的代码

复制代码代码如下: <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: px solid gray; padding: px px; </style>

　　 然后写服务器端返回json数据的代码

复制代码代码如下: string data = "["id":" " "name":"林宇" "cla":" 软件" "sex":"男" "tel":" " "id":" " "name":"李四" "cla": " 网络" "sex":"女" "tel":" " "id":" " "name ":"张三" "cla":" 软件" "sex":"男" "tel":" "]"; context Response Write(data);

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

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

cha138/Article/program/Java/JSP/201311/20323