jQuery解析json数据实例分析


Posted in Javascript onNovember 24, 2015

本文实例分析了jQuery解析json数据的方法。分享给大家供大家参考,具体如下:

先来看看我们的Json数据格式:

[
{id:01,name:"小白",old:29,sex:"男"},
{id:02,name:"小蓝",old:29,sex:"男"},
{id:03,name:"小雅",old:29,sex:"男"}
]

为了消除乱码问题,我们设置一个过滤器(代码片段)

public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {
    req.setCharacterEncoding("UTF-8");
    resp.setCharacterEncoding("UTF-8");
    resp.setContentType("text/html;charset=UTF-8");
    chain.doFilter(req, resp);
}

服务端我用Servlet生成json数据(代码片段)。

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    PrintWriter out = response.getWriter(); //过滤器已经做过编码转化了。 resp.setContentType("text/html;charset=UTF-8");
    StringBuffer sb = new StringBuffer();
    sb.append("[{id:01,name:\"小白\",old:29,sex:\"男\"},");
    sb.append("{id:02,name:\"小蓝\",old:29,sex:\"男\"},");
    sb.append("{id:03,name:\"小雅\",old:29,sex:\"男\"}]");
    out.print(sb);
}

页面端JQuery代码:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>json学习</title>
  <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
  <script type="text/javascript" src="jslib/jquery.js" charset="UTF-8"></script>
  <script type="text/javascript" charset="UTF-8">
    $(document).ready(function() {
      var select = $("#select");
      $.get("json.do", null, function(data) {
        var jsonData = eval(data);//接收到的数据转化为JQuery对象,由JQuery为我们处理
        $.each(jsonData, function(index, objVal) { //遍历对象数组,index是数组的索引号,objVal是遍历的一个对象。
          //val["属性"]可取到对应的属性值。
          $("<option>").attr("value", objVal["id"]).html(objVal["name"]).appendTo(select);
        });
      });
    });
  </script>
</head>
<body>
<select id="select"></select>
</body>
</html>

之前为了省事,我层把json数据写到json.txt,json.jsp中,不用Servlet封装,可是后来我用Firebug调试了一下

jQuery解析json数据实例分析

写到.jsp、.txt文件中的json数据,没有被解析出来,Firebug中调试了一下,10行断点下一步直接结束,

就没有遍历对象数组。于是分别测试了一下

 文本文件  json.txt
 jsp文件   json.jsp
 Servlet   json.do

返回的数据,浏览器只有解析出Servlet的返回的数据是json数据

jQuery解析json数据实例分析

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 拾碎[三] 使用className属性
Oct 16 Javascript
用Jquery重写windows.alert方法实现思路
Apr 03 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
Apr 11 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
Oct 17 Javascript
javascript 获取元素样式必杀技
May 04 Javascript
jQuery循环滚动新闻列表示例代码
Jun 17 Javascript
javascript获取当前鼠标坐标的方法
Jan 10 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
Oct 31 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
Apr 20 Javascript
详解使用路由延迟加载 Angular 模块
Oct 12 Javascript
微信小程序自定义轮播图
Nov 04 Javascript
微信小程序实现时间预约功能
Nov 27 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
Nov 24 #Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
Nov 24 #Javascript
jQuery解析Json实例详解
Nov 24 #Javascript
全面解析Bootstrap表单使用方法(表单控件)
Nov 24 #Javascript
全面解析Bootstrap表单使用方法(表单样式)
Nov 24 #Javascript
基于JavaScript实现Json数据根据某个字段进行排序
Nov 24 #Javascript
jquery彩色投票进度条简单实例演示
Jul 23 #Javascript
You might like
PHP中通过HTTP_USER_AGENT判断是否为手机移动终端的函数代码
2013/02/14 PHP
PHP使用get_headers函数判断远程文件是否存在的方法
2014/11/28 PHP
php获取系统变量方法小结
2015/05/29 PHP
PHP函数nl2br()与自定义函数nl2p()换行用法分析
2016/04/02 PHP
网站页面自动跳转实现方法PHP、JSP(下)
2010/08/01 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
2011/09/29 Javascript
SeaJS入门教程系列之完整示例(三)
2014/03/03 Javascript
js函数名与form表单元素同名冲突的问题
2014/03/07 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
QQ空间顶部折页撕开效果示例代码
2014/06/15 Javascript
Uploadify上传文件方法
2016/03/16 Javascript
用jQuery实现可输入多选下拉组合框实例代码
2017/01/18 Javascript
Angular中的interceptors拦截器
2017/06/25 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
2018/04/22 Javascript
vue实现form表单与table表格的数据关联功能示例
2019/01/29 Javascript
Vue SPA 初次进入加载动画实现代码
2019/11/14 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
python字典排序实例详解
2015/05/20 Python
python使用Pycharm创建一个Django项目
2018/03/05 Python
Python3基于sax解析xml操作示例
2018/05/22 Python
对Python通过pypyodbc访问Access数据库的方法详解
2018/10/27 Python
Tensorflow实现神经网络拟合线性回归
2019/07/19 Python
python实现通过flask和前端进行数据收发
2019/08/22 Python
使用Python实现分别输出每个数组
2019/12/06 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
鱼油专家:Omegavia
2016/10/10 全球购物
override和overload的区别
2016/03/09 面试题
师范院校学生自荐信范文
2013/12/27 职场文书
制药工程专业个人求职自荐信
2014/01/25 职场文书
办公室主任竞聘演讲稿
2014/05/15 职场文书
学生检讨书怎么写?
2014/10/10 职场文书
离婚协议书范文2014(夫妻感情破裂)
2014/12/14 职场文书
党风廉正建设责任书
2015/01/29 职场文书
对公司的意见和建议
2015/06/04 职场文书
开学第一周值周总结
2015/07/16 职场文书
担保书怎么写 ?
2019/04/22 职场文书