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 相关文章推荐
prototype1.4中文手册
Sep 22 Javascript
超棒的javascript页面顶部卷动广告效果
Dec 01 Javascript
javascript 事件绑定问题
Jan 01 Javascript
Jquery阻止事件冒泡 event.stopPropagation
Dec 11 Javascript
仿新浪微博登陆邮箱提示效果的js代码
Aug 02 Javascript
js操作table示例(个人心得)
Nov 29 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
Dec 19 Javascript
Jquery获取和修改img的src值的方法
Feb 17 Javascript
div失去焦点事件实现思路
Apr 22 Javascript
JavaScript表单验证开发
Nov 23 Javascript
JavaScript学习笔记之图片库案例分析
Jan 08 Javascript
图解javascript作用域链
May 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
Terran历史背景
2020/03/14 星际争霸
php 计划任务 检测用户连接状态
2012/03/29 PHP
基于php权限分配的实现代码
2013/04/28 PHP
基于AppServ,XAMPP,WAMP配置php.ini去掉警告信息(NOTICE)的方法详解
2013/05/07 PHP
3种php生成唯一id的方法
2015/11/23 PHP
PHP编程中尝试程序并发的几种方式总结
2016/03/21 PHP
Firebug 字幕文件JSON地址获取代码
2009/10/28 Javascript
Javascript实现简单的富文本编辑器附演示
2014/06/16 Javascript
jQuery插件kinMaxShow扩展效果用法实例
2015/05/04 Javascript
三分钟带你玩转jQuery.noConflict()
2016/02/15 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
2017/09/15 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
2019/07/10 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
2019/12/18 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
2020/03/09 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
JS实现鼠标按下拖拽效果
2020/07/23 Javascript
[01:01:36]Optic vs paiN 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python实现数通设备端口监控示例
2014/04/02 Python
详解Python3中字符串中的数字提取方法
2017/01/14 Python
机器学习经典算法-logistic回归代码详解
2017/12/22 Python
Python解决抛小球问题 求小球下落经历的距离之和示例
2018/02/01 Python
详解Python的数据库操作(pymysql)
2019/04/04 Python
python把转列表为集合的方法
2019/06/28 Python
Python的log日志功能及设置方法
2019/07/11 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
python怎么调用自己的函数
2020/07/01 Python
python实现批处理文件
2020/07/28 Python
如何基于python把文字图片写入word文档
2020/07/31 Python
8种常用的Python工具
2020/08/05 Python
美国知名的隐形眼镜电商:Contacts America
2019/11/19 全球购物
制药工程专业应届生求职信
2013/09/24 职场文书
高中生的自我鉴定范文
2014/01/24 职场文书
钱学森电影观后感
2015/06/04 职场文书
Mysql数据库命令大全
2021/05/26 MySQL
React 并发功能体验(前端的并发模式)
2021/07/01 Javascript