jQuery解析返回的xml和json方法详解


Posted in Javascript onJanuary 05, 2017

本文实例讲述了jQuery解析返回的xml和json方法。分享给大家供大家参考,具体如下:

一、jQuery 解析ajax请求返回的xml格式的数据

1、发送ajax请求

<script type="text/JavaScript">
function jqxml(){
 $.ajax({
  url:"http://localhost:18080/servlet/Servlet1",
   // 请求方式
  type:"post",
  // 服务器返回的数据的格式,常用的有 text/xml/json
  dataType:"xml",
  data:{age:1212},
  success:function(data){
   // 这里获取的data就是一个xml对象,这个对象可以按照dom树格式来解析
   var name=$(data).find("infos").find("info").each(function(){
    alert($(this).find("name").text());
    alert($(this).find("age").text());
   });
  },
  error:function (edata){
   alert(edata);
  }
 });
};
</script>

2、servlet 端返回的值

@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  // TODO Auto-generated method stub
  String aaa= request.getParameter("age");
  System.out.print("ajax 数据:"+aaa);
  // 向客户端响应信息
  response.setCharacterEncoding("GBK");
  response.setContentType("text/xml");
  PrintWriter out= response.getWriter();
  out.print("<?xml version=\"1.0\" encoding=\"GBK\"?>");
  out.println("<infos>");
  out.println("<info>");
  out.println("<name>"+"name1"+"</name>");
  out.println("<age>"+12+"</age>");
  out.println("</info>");
  out.println("<info>");
  out.println("<name>"+"name11"+"</name>");
  out.println("<age>"+112+"</age>");
  out.println("</info>");
  out.println("</infos>");
}

二、jquery 解析返回的json 格式的数据,这里是返回的json对象格式,如果返回的是json数组格式,就是js数组,所以按照js数组获取

1、ajax 请求以及解析过程

<script type="text/javascript">
function jqxml(){
 $.ajax({
  url:"http://localhost:18080/servlet/Servlet3",
   // 请求方式
  type:"post",
  // 服务器返回的数据的格式,常用的有 text/xml/json
  dataType:"json",
  data:{age:1212},
  success:function(data){
  // 通过eval() 函数将字符串转化为js对象,如果返回的是json对象则eval() 函数不处理,如果返回的是json字符串则进行转化
  // 注意这样写有时有问题,因为已经在ajax中定义了返回的是json对象而在使用eval() 来转化就有可能报错,所以要吗把json 换成text要吗把eval去了直接使用data
  var json= eval("("+data+")");
    var age1=json.age;
    var name1=json.name;
   alert(age1+""+name1);
  },
  error:function (edata){
   alert(edata);
  }
 });
};
</script>

2、 servlet 返回的json格式数据

protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {
  // 向ajax 返回json格式的数据
  String aaa = request.getParameter("age");
  System.out.print("ajax 数据:" + aaa);
  // 向客户端响应信息
  response.setCharacterEncoding("GBK");
  response.setContentType("text/json");
  PrintWriter out = response.getWriter();
  // 这里使用 json 对象的格式
  String stu = "{age:12,name:name12}";
  out.print(stu);
  out.flush();
  out.close();
}

注意:在使用ajax请求返回 json 数据的时候遇到了如下的问题:

1、后台返回的是json 格式的字符串:

String stu = "{\"age\":\"12\",\"name\":\"whd\"}";

大家看到这些转义字符,会问 干嘛写这么麻烦,看看就知道: jquery 1.4以后对json格式变严格了

也就是说必须要这种格式的

{"键":"值","键":"值"};

像原来的

{键:值,键:值}
{'键':'值','键':'值'}

这种都是错误的,不合标准,所以jquery返回error

2、这个问题要注意,我自己 写这篇文章 时上面的那些代码都是没问题的后来使用发现有问题了,问题是什么那:

① 、使用ajax请求后台返回json格式的字符串,之前在ajax请求的dataType="json" 时 返回的数据使用 eval("("++")") 来转化没问题,之前也有注释解释说:

通过eval() 函数将字符串转化为js对象,如果返回的是json对象则eval() 函数不处理,如果返回的是json字符串则进行转化,但现在的情况是如果dataType="json"则eval() 就报错。而可以直接使用success:function(data) 中的data 这个json对象。
② 、使用ajax请求后台返回json格式字符串,而如果dataType='text' 则需要使用eval() 来将 json格式的字符串转化为json 对象。
③ 、如果使用的是纯js 则返回的json字符串需要使用 eval() 来转化为json对象,而如果是jquery 等框架像 ajax中定义dataType="json" 这样的话在传递的过程中已经将json格式的字符串转化为了json 对象,就没必要使用eval() 来转化。

在贴吧中有人也问这样的问题,其中一个回答如下:

对于这个问题:“后台调用了jsonarray.fromobject (list集合)   是不是这样就是json对象了  前台就不要 eval 了”

首先说明这样不是json对象,返回的是一个json格式的字符串,如果你前端用的是纯js,就要eval一下,但如果有用到jq框架等,它会帮你自动转成json对象,就不用eval了。

注:eval方法不是转json对象的意思,而是将字符串转成可执行的js代码。
如:对于一个字符串“alert('hello world')",eval这个字符串就能执行了。

总结:

在后台返回的是json格式的字符串的前提下

如果前台获取的是 json格式的字符串则需要使用 eval() 或JSON.parse(str) 等方法将字符串转化为json 对象,其实也就是js对象

如果前台使用了jq等框架并定义了返回的数据类型,如ajax中如果定义dataType='json' 则后台数据传过来前台会自动转化为json对象即js对象  就不用我们使用eval() 等方法进行转化。

Javascript 相关文章推荐
表格单元格交错着色实现思路及代码
Apr 01 Javascript
百度地图API之本地搜索与范围搜索
Jul 30 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
Feb 16 Javascript
JavaScript中点击事件的写法
Jun 28 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
Jan 11 Javascript
JS实现简单的天数计算器完整实例
Apr 28 Javascript
解决VUE中document.body.scrollTop为0的问题
Sep 15 Javascript
layui禁用侧边导航栏点击事件的解决方法
Sep 25 Javascript
layui前端时间戳转化实例
Nov 15 Javascript
JS中FormData类实现文件上传
Mar 27 Javascript
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
使用snowfall.jquery.js实现爱心满屏飞的效果
Jan 05 #Javascript
jQuery实现动态文字搜索功能
Jan 05 #Javascript
JS实现HTML标签转义及反转义
Apr 14 #Javascript
jQuery基于ajax操作json数据简单示例
Jan 05 #Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
Jan 05 #Javascript
如何提高Dom访问速度
Jan 05 #Javascript
AngularJS中run方法的巧妙运用
Jan 04 #Javascript
You might like
火影忍者:这才是千手柱间和扉间的真正死因,角都就比较搞笑了!
2020/03/10 日漫
php mysql procedure实现获取多个结果集的方法【基于thinkPHP】
2016/11/09 PHP
7个Javascript地图脚本整理
2009/10/20 Javascript
jQuery的写法不同导致的兼容性问题的解决方法
2010/07/29 Javascript
通过jQuery源码学习javascript(一)
2012/12/27 Javascript
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
详解AngularJS的通信机制
2015/06/18 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
2016/06/07 Javascript
jQuery Tree Multiselect使用详解
2017/05/02 jQuery
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
2017/11/09 Javascript
jQuery实现的简单获取索引功能示例
2018/06/04 jQuery
微信小程序提取公用函数到util.js及使用方法示例
2019/01/10 Javascript
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
Vue项目服务器部署之子目录部署方法
2019/05/12 Javascript
vue中实现点击变成全屏的多种方法
2020/09/27 Javascript
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
Python简单检测文本类型的2种方法【基于文件头及cchardet库】
2016/09/18 Python
详谈python read readline readlines的区别
2017/09/22 Python
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
python批量设置多个Excel文件页眉页脚的脚本
2018/03/14 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
快速解决pyqt5窗体关闭后子线程不同时退出的问题
2019/06/19 Python
Pyecharts绘制全球流向图的示例代码
2020/01/08 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
自荐信如何“自荐”
2013/10/24 职场文书
小学生元旦感言
2014/02/26 职场文书
文科毕业生自荐书范文
2014/04/17 职场文书
2014社会治安综合治理工作总结
2014/12/04 职场文书
应聘教师求职信范文
2015/03/20 职场文书
新年祝酒词大全
2015/08/11 职场文书
中学团支部工作总结
2015/08/13 职场文书
搞笑婚礼主持词开场白
2015/11/24 职场文书
Java spring单点登录系统
2021/09/04 Java/Android
Python之matplotlib绘制饼图
2022/04/13 Python