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 相关文章推荐
javascript-TreeView父子联动效果保持节点状态一致
Aug 12 Javascript
JQUERY复选框CHECKBOX全选,取消全选
Aug 30 Javascript
JavaScript监测ActiveX控件是否已经安装过的代码
Sep 02 Javascript
jquery 打开窗口返回值实现代码
Mar 04 Javascript
实例说明为什么不要行内使用javascript
Apr 18 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
Dec 18 Javascript
JavaScript中的Function函数
Aug 27 Javascript
js简单实现网页换肤功能
Apr 07 Javascript
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
详解vue-router导航守卫
Jan 19 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 Javascript
如何HttpServletRequest文件对象并储存
Aug 14 Javascript
使用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
PHP截断标题且兼容utf8和gb2312编码
2013/09/22 PHP
提高php编程效率技巧
2015/08/13 PHP
php代码检查代理ip的有效性
2016/08/19 PHP
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
javascript结合ajax读取txt文件内容
2014/12/05 Javascript
js实现同一页面多个不同运动效果的方法
2015/04/10 Javascript
javascript限制文本框输入值类型的方法
2015/05/07 Javascript
js限制文本框的输入内容代码分享(3类)
2015/08/20 Javascript
javascript bom是什么及bom和dom的区别
2015/11/26 Javascript
jQuery简单动画变换效果实例分析
2016/07/04 Javascript
微信jssdk用法汇总
2016/07/16 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
AngularJS使用ng-options指令实现下拉框
2016/08/23 Javascript
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
详解React 16 中的异常处理
2017/07/28 Javascript
EL表达式截取字符串的函数说明
2017/09/22 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
搭建一个Koa后端项目脚手架的方法步骤
2019/05/30 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
2020/10/02 Javascript
vue基于Echarts的拖拽数据可视化功能实现
2020/12/04 Vue.js
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
Python进程间通信之共享内存详解
2017/10/30 Python
在windows下使用python进行串口通讯的方法
2019/07/02 Python
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
应届大专毕业生个人自荐信
2013/09/22 职场文书
化学实验员岗位职责
2013/12/28 职场文书
大专毕业自我鉴定
2014/02/04 职场文书
小学数学课后反思
2014/04/23 职场文书
学习方法演讲稿
2014/05/10 职场文书
人事文员岗位职责
2015/02/04 职场文书
银行求职信范文怎么写
2015/03/20 职场文书
违纪开除通知书
2015/04/25 职场文书
2015中学学校工作总结
2015/07/20 职场文书
小学体育组工作总结
2015/08/13 职场文书
JavaScript最完整的深浅拷贝实现方式详解
2022/02/28 Javascript