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


Posted in Javascript onJuly 13, 2013

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

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

我们建一个这样的web项目:

浅析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\":\"张三\",\"cla\":\"10软件\",\"sex\":\"男\",\"tel\":\"10086\"}]";
context.Response.Write(data);

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

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

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

Javascript 相关文章推荐
javascript显示选择目录对话框的代码
Nov 10 Javascript
JSQL SQLProxy 的 php 版本代码
May 05 Javascript
javascript作用域容易记错的两个地方分析
Jun 22 Javascript
前后台交互过程中json格式如何解析以及如何生成
Dec 26 Javascript
jQuery实现 注册时选择阅读条款 左右移动
Apr 11 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
Jul 23 Javascript
js编写选项卡效果
May 23 Javascript
javascript跳转与返回和刷新页面的实例代码
Nov 20 Javascript
js实现简单进度条效果
Mar 25 Javascript
Element InfiniteScroll无限滚动的具体使用方法
Jul 27 Javascript
js实现无缝轮播图插件封装
Jul 31 Javascript
修改Vue打包后的默认文件名操作
Aug 12 Javascript
网页前端优化之滚动延时加载图片示例
Jul 13 #Javascript
JavaScript获取FCK编辑器信息的具体方法
Jul 12 #Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
Jul 12 #Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
Jul 12 #Javascript
jquery 滚动条事件简单实例
Jul 12 #Javascript
简约JS日历控件 实例代码
Jul 12 #Javascript
javascript中自定义对象的属性方法分享
Jul 12 #Javascript
You might like
PHP遍历二维数组的代码
2011/04/22 PHP
php中引用符号(&amp;)的使用详解
2013/11/13 PHP
Yii扩展组件编写方法实例分析
2015/06/29 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
PHPMAILER实现PHP发邮件功能
2018/04/18 PHP
PHP与Web页面的交互示例详解二
2020/08/04 PHP
BOOM vs RR BO5 第四场 2.14
2021/03/10 DOTA
javascript第一课
2007/02/27 Javascript
Extjs学习笔记之一 初识Extjs之MessageBox
2010/01/07 Javascript
js DataSet数据源处理代码
2010/03/29 Javascript
niceTitle 基于jquery的超链接提示插件
2010/05/31 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
2015/07/05 Javascript
jQuery实现定时读取分析xml文件的方法
2015/07/16 Javascript
jQuery 3.0 的变化及使用方法
2016/02/01 Javascript
在JavaScript中使用JSON数据
2016/02/15 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
2016/06/30 Javascript
浅谈JS中的bind方法与函数柯里化
2016/08/10 Javascript
JS控制HTML元素的显示和隐藏的两种方法
2016/09/27 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
vue中的非父子间的通讯问题简单的实例代码
2017/07/19 Javascript
JS实现小球的弹性碰撞效果
2017/11/11 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
小程序最新获取用户昵称和头像的方法总结
2019/09/23 Javascript
工作中常用js功能汇总
2020/11/07 Javascript
tornado捕获和处理404错误的方法
2014/02/26 Python
Python定时执行之Timer用法示例
2015/05/27 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
Django1.11配合uni-app发起微信支付的实现
2019/10/12 Python
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
小学生作文批改评语
2014/12/25 职场文书
2015年端午节国旗下演讲稿
2015/03/19 职场文书
工作推荐信模板
2015/03/25 职场文书
裁员通知
2015/04/25 职场文书
初中体育课教学反思
2016/02/16 职场文书
创业计划书之家教中心
2019/09/25 职场文书
比较几种Redis集群方案
2021/06/21 Redis