首页 > 网络编程 > JavaScript > javascript类库 > jquery > jQuery解析返回的xml和json

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

2017-01-05 09:57:18 作者：QH_JAVA

这篇文章主要介绍了jQuery解析返回的xml和json方法,结合实例形式分析了jQuery解析xml与json的方法与相关注意事项,需要的朋友可以参考下

本文实例讲述了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() 等方法进行转化。

PS：这里再为大家提供几款关于xml与json操作的在线工具供大家参考使用：

在线XML/JSON互相转换工具：
http://tools.jb51.net/code/xmljson

在线格式化XML/在线压缩XML：
http://tools.jb51.net/code/xmlformat

XML在线压缩/格式化工具：
http://tools.jb51.net/code/xml_format_compress