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 相关文章推荐
js随机颜色代码的多种实现方式
Apr 23 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
Jun 06 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
Apr 08 Javascript
详解JavaScript逻辑And运算符
Dec 04 Javascript
Bootstrap3学习笔记(二)之排版
May 20 Javascript
angular ngClick阻止冒泡使用默认行为的方法
Nov 03 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
Jan 08 Javascript
jQuery实现简易的输入框字数计数功能示例
Jan 16 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
Jun 18 Javascript
layui时间控件选择时间范围的实现方法
Sep 28 Javascript
Vue项目中Api的组织和返回数据处理的操作
Nov 04 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的ob_start();控制您的浏览器cache!
2006/11/25 PHP
php 获取完整url地址
2008/12/20 PHP
批量去除PHP文件中bom的PHP代码
2012/03/13 PHP
PHP人民币金额数字转中文大写的函数代码
2013/02/27 PHP
PHP中类的自动加载的方法
2017/03/17 PHP
详解php与ethereum客户端交互
2018/04/28 PHP
解决laravel资源加载路径设置的问题
2019/10/14 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
nullJavascript中创建对象的五种方法实例
2013/05/07 Javascript
js实现简单的星级选择器提交效果适用于评论等
2013/10/18 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
jQuery+ajax中getJSON() 用法实例
2014/12/22 Javascript
Angular用来控制元素的展示与否的原生指令介绍
2015/01/07 Javascript
Javascript中的作用域和上下文深入理解
2015/07/03 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
2017/04/25 Javascript
Vue.js中兄弟组件之间互相传值实例
2017/06/01 Javascript
JS与SQL方式随机生成高强度密码示例
2018/12/29 Javascript
NodeJs操作MongoDB教程之分页功能以及常见问题
2019/04/09 NodeJs
通过javascript实现扫雷游戏代码实例
2020/02/09 Javascript
[01:34]传奇从这开始 2016国际邀请赛中国区预选赛震撼开启
2016/06/26 DOTA
python实现从ftp服务器下载文件的方法
2015/04/30 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
Python中读取文件名中的数字的实例详解
2020/12/25 Python
HTML5画渐变背景图片并自动下载实现步骤
2013/11/18 HTML / CSS
北大青鸟学生求职信
2013/09/24 职场文书
应届生如何写自荐信
2014/01/05 职场文书
收银员岗位职责
2014/02/07 职场文书
《童年》教学反思
2014/02/18 职场文书
党的群众路线对照检查材料
2014/08/27 职场文书
执法作风整顿剖析材料
2014/10/11 职场文书
大学生学习新党章思想汇报
2014/10/25 职场文书
感恩节寄语2015
2015/03/24 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
物业保洁员管理制度
2015/08/05 职场文书