jQuery解析返回的xml和json方法详解
本文实例讲述了jQuery解析返回的xml和json方法。分享给大家供大家参考,具体如下:
一、jQuery解析ajax请求返回的xml格式的数据
1、发送ajax请求
<scripttype="text/JavaScript"> functionjqxml(){ $.ajax({ url:"http://localhost:18080/servlet/Servlet1", //请求方式 type:"post", //服务器返回的数据的格式,常用的有text/xml/json dataType:"xml", data:{age:1212}, success:function(data){ //这里获取的data就是一个xml对象,这个对象可以按照dom树格式来解析 varname=$(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 protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{ //TODOAuto-generatedmethodstub Stringaaa=request.getParameter("age"); System.out.print("ajax数据:"+aaa); //向客户端响应信息 response.setCharacterEncoding("GBK"); response.setContentType("text/xml"); PrintWriterout=response.getWriter(); out.print("<?xmlversion=\"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请求以及解析过程
<scripttype="text/javascript"> functionjqxml(){ $.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 varjson=eval("("+data+")"); varage1=json.age; varname1=json.name; alert(age1+""+name1); }, error:function(edata){ alert(edata); } }); }; </script>
2、servlet返回的json格式数据
protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{ //向ajax返回json格式的数据 Stringaaa=request.getParameter("age"); System.out.print("ajax数据:"+aaa); //向客户端响应信息 response.setCharacterEncoding("GBK"); response.setContentType("text/json"); PrintWriterout=response.getWriter(); //这里使用json对象的格式 Stringstu="{age:12,name:name12}"; out.print(stu); out.flush(); out.close(); }
注意:在使用ajax请求返回json数据的时候遇到了如下的问题:
1、后台返回的是json格式的字符串:
Stringstu="{\"age\":\"12\",\"name\":\"whd\"}";
大家看到这些转义字符,会问干嘛写这么麻烦,看看就知道:jquery1.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('helloworld')",eval这个字符串就能执行了。
总结:
在后台返回的是json格式的字符串的前提下
如果前台获取的是json格式的字符串则需要使用eval()或JSON.parse(str)等方法将字符串转化为json对象,其实也就是js对象
如果前台使用了jq等框架并定义了返回的数据类型,如ajax中如果定义dataType='json'则后台数据传过来前台会自动转化为json对象即js对象 就不用我们使用eval()等方法进行转化。
PS:这里再为大家提供几款关于xml与json操作的在线工具供大家参考使用:
在线