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

2019-11-19 18:08:07

字體：大中小

來源：轉載

供稿：網友

本文實例講述了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 端返回的值

@Overrideprotected 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.VeVB.COm/code/xmljson

在線格式化XML/在線壓縮XML：
http://tools.VeVB.COm/code/xmlformat

XML在線壓縮/格式化工具：
http://tools.VeVB.COm/code/xml_format_compress