javascript

位置:IT落伍者 >> javascript >> 浏览文章

ajax请求json数据并用js解析


发布日期:2021年03月14日
 
ajax请求json数据并用js解析
这应该是每个web开发的人员都应该掌握的基础技术需要的朋友可以参考下

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

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

我们建一个这样的web项目

首先写客户端的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: "dataashx"
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 {
bordercollapse: collapse;
}
table td {
textalign: 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":""}]";
contextResponseWrite(data);


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

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

这应该是每个web开发的人员都应该掌握的基础技术吧

               

上一篇:使用JS 清空File控件的路径值

下一篇:用JavaScript实现动画效果的方法