浅析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 相关文章推荐
jQuery $.each的用法说明
Mar 22 Javascript
js前台判断开始时间是否小于结束时间
Feb 23 Javascript
javascript删除option选项的多种方法总结
Nov 22 Javascript
input:checkbox多选框实现单选效果跟radio一样
Jun 16 Javascript
jQuery页面刷新(局部、全部)问题分析
Jan 09 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
Jan 26 Javascript
jQuery树插件zTree使用方法详解
May 02 jQuery
详解Angular路由 ng-route和ui-router的区别
May 22 Javascript
Vue中render方法的使用详解
Jan 26 Javascript
cocos2dx+lua实现橡皮擦功能
Dec 20 Javascript
vuex 动态注册方法 registerModule的实现
Jul 03 Javascript
jQuery实现动态加载瀑布流
Sep 01 jQuery
网页前端优化之滚动延时加载图片示例
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
fleaphp crud操作之find函数的使用方法
2011/04/23 PHP
PHP和javascript常用正则表达式及用法实例
2014/07/01 PHP
linux下使用crontab实现定时PHP计划任务失败的原因分析
2014/07/05 PHP
PHP实现获取FLV文件的时间
2015/02/10 PHP
PHPExcel笔记, mpdf导出
2016/05/03 PHP
php.ini中date.timezone设置详解
2016/11/20 PHP
PHP获取当前执行php文件名的代码
2017/03/02 PHP
php通过pecl方式安装扩展的实例讲解
2018/02/02 PHP
JQuery插件Style定制化方法的分析与比较
2012/05/03 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
2013/04/26 Javascript
JS实现QQ图片一闪一闪的效果小例子
2013/07/31 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
2014/05/14 Javascript
js判断日期时间有效性的方法
2015/10/24 Javascript
node.js中的事件处理机制详解
2016/11/26 Javascript
jQuery内存泄露解决办法
2016/12/13 Javascript
JS正则匹配中文的方法示例
2017/01/06 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
在vue项目中,将juery设置为全局变量的方法
2018/09/25 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
2019/12/23 jQuery
Vue 解决通过this.$refs来获取DOM或者组件报错问题
2020/07/28 Javascript
[01:59]深扒TI7聊天轮盘语音出处 1
2017/05/11 DOTA
python实现爬虫统计学校BBS男女比例之数据处理(三)
2015/12/31 Python
python生成器表达式和列表解析
2016/03/10 Python
python绘制条形图方法代码详解
2017/12/19 Python
django2 快速安装指南分享
2018/01/05 Python
python实现Decorator模式实例代码
2018/02/09 Python
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2019/04/03 Python
Python实现图片指定位置加图片水印(附Pyinstaller打包exe)
2021/03/04 Python
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
类的核心特性有哪些
2014/01/01 面试题
大学军训感言400字
2014/03/11 职场文书
幼儿园教师的自我评价范文
2014/09/17 职场文书
2014年单位法制宣传日活动总结
2014/11/01 职场文书
检讨书怎么写
2015/05/07 职场文书
springboot如何接收application/x-www-form-urlencoded类型的请求
2021/11/02 Java/Android