jQuery解析返回的xml和json方法詳解
本文實(shí)例講述了jQuery解析返回的xml和json方法。分享給大家供大家參考,具體如下:
一、jQuery 解析ajax請(qǐng)求返回的xml格式的數(shù)據(jù)
1、發(fā)送ajax請(qǐng)求
<script type="text/JavaScript">
function jqxml(){
$.ajax({
url:"http://localhost:18080/servlet/Servlet1",
// 請(qǐng)求方式
type:"post",
// 服務(wù)器返回的數(shù)據(jù)的格式,常用的有 text/xml/json
dataType:"xml",
data:{age:1212},
success:function(data){
// 這里獲取的data就是一個(gè)xml對(duì)象,這個(gè)對(duì)象可以按照dom樹(shù)格式來(lái)解析
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 數(shù)據(jù):"+aaa);
// 向客戶端響應(yīng)信息
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 格式的數(shù)據(jù),這里是返回的json對(duì)象格式,如果返回的是json數(shù)組格式,就是js數(shù)組,所以按照js數(shù)組獲取
1、ajax 請(qǐng)求以及解析過(guò)程
<script type="text/javascript">
function jqxml(){
$.ajax({
url:"http://localhost:18080/servlet/Servlet3",
// 請(qǐng)求方式
type:"post",
// 服務(wù)器返回的數(shù)據(jù)的格式,常用的有 text/xml/json
dataType:"json",
data:{age:1212},
success:function(data){
// 通過(guò)eval() 函數(shù)將字符串轉(zhuǎn)化為js對(duì)象,如果返回的是json對(duì)象則eval() 函數(shù)不處理,如果返回的是json字符串則進(jìn)行轉(zhuǎn)化
// 注意這樣寫(xiě)有時(shí)有問(wèn)題,因?yàn)橐呀?jīng)在ajax中定義了返回的是json對(duì)象而在使用eval() 來(lái)轉(zhuǎn)化就有可能報(bào)錯(cuò),所以要嗎把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格式數(shù)據(jù)
protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {
// 向ajax 返回json格式的數(shù)據(jù)
String aaa = request.getParameter("age");
System.out.print("ajax 數(shù)據(jù):" + aaa);
// 向客戶端響應(yīng)信息
response.setCharacterEncoding("GBK");
response.setContentType("text/json");
PrintWriter out = response.getWriter();
// 這里使用 json 對(duì)象的格式
String stu = "{age:12,name:name12}";
out.print(stu);
out.flush();
out.close();
}
注意:在使用ajax請(qǐng)求返回 json 數(shù)據(jù)的時(shí)候遇到了如下的問(wèn)題:
1、后臺(tái)返回的是json 格式的字符串:
String stu = "{\"age\":\"12\",\"name\":\"whd\"}";
大家看到這些轉(zhuǎn)義字符,會(huì)問(wèn) 干嘛寫(xiě)這么麻煩,看看就知道: jquery 1.4以后對(duì)json格式變嚴(yán)格了
也就是說(shuō)必須要這種格式的
{"鍵":"值","鍵":"值"};
像原來(lái)的
{鍵:值,鍵:值}
{'鍵':'值','鍵':'值'}
這種都是錯(cuò)誤的,不合標(biāo)準(zhǔn),所以jquery返回error
2、這個(gè)問(wèn)題要注意,我自己 寫(xiě)這篇文章 時(shí)上面的那些代碼都是沒(méi)問(wèn)題的后來(lái)使用發(fā)現(xiàn)有問(wèn)題了,問(wèn)題是什么那:
① 、使用ajax請(qǐng)求后臺(tái)返回json格式的字符串,之前在ajax請(qǐng)求的dataType="json" 時(shí) 返回的數(shù)據(jù)使用 eval("("++")") 來(lái)轉(zhuǎn)化沒(méi)問(wèn)題,之前也有注釋解釋說(shuō):
通過(guò)eval() 函數(shù)將字符串轉(zhuǎn)化為js對(duì)象,如果返回的是json對(duì)象則eval() 函數(shù)不處理,如果返回的是json字符串則進(jìn)行轉(zhuǎn)化,但現(xiàn)在的情況是如果dataType="json"則eval() 就報(bào)錯(cuò)。而可以直接使用success:function(data) 中的data 這個(gè)json對(duì)象。
② 、使用ajax請(qǐng)求后臺(tái)返回json格式字符串,而如果dataType='text' 則需要使用eval() 來(lái)將 json格式的字符串轉(zhuǎn)化為json 對(duì)象。
③ 、如果使用的是純js 則返回的json字符串需要使用 eval() 來(lái)轉(zhuǎn)化為json對(duì)象,而如果是jquery 等框架像 ajax中定義dataType="json" 這樣的話在傳遞的過(guò)程中已經(jīng)將json格式的字符串轉(zhuǎn)化為了json 對(duì)象,就沒(méi)必要使用eval() 來(lái)轉(zhuǎn)化。
在貼吧中有人也問(wèn)這樣的問(wèn)題,其中一個(gè)回答如下:
對(duì)于這個(gè)問(wèn)題:“后臺(tái)調(diào)用了jsonarray.fromobject (list集合) 是不是這樣就是json對(duì)象了 前臺(tái)就不要 eval 了”
首先說(shuō)明這樣不是json對(duì)象,返回的是一個(gè)json格式的字符串,如果你前端用的是純js,就要eval一下,但如果有用到j(luò)q框架等,它會(huì)幫你自動(dòng)轉(zhuǎn)成json對(duì)象,就不用eval了。
注:eval方法不是轉(zhuǎn)json對(duì)象的意思,而是將字符串轉(zhuǎn)成可執(zhí)行的js代碼。
如:對(duì)于一個(gè)字符串“alert('hello world')",eval這個(gè)字符串就能執(zhí)行了。
總結(jié):
在后臺(tái)返回的是json格式的字符串的前提下
如果前臺(tái)獲取的是 json格式的字符串則需要使用 eval() 或JSON.parse(str) 等方法將字符串轉(zhuǎn)化為json 對(duì)象,其實(shí)也就是js對(duì)象
如果前臺(tái)使用了jq等框架并定義了返回的數(shù)據(jù)類型,如ajax中如果定義dataType='json' 則后臺(tái)數(shù)據(jù)傳過(guò)來(lái)前臺(tái)會(huì)自動(dòng)轉(zhuǎn)化為json對(duì)象即js對(duì)象 就不用我們使用eval() 等方法進(jìn)行轉(zhuǎn)化。
PS:這里再為大家提供幾款關(guān)于xml與json操作的在線工具供大家參考使用:
在線XML/JSON互相轉(zhuǎn)換工具:
http://tools.jb51.net/code/xmljson
在線格式化XML/在線壓縮XML:
http://tools.jb51.net/code/xmlformat
XML在線壓縮/格式化工具:
http://tools.jb51.net/code/xml_format_compress
在線JSON代碼檢驗(yàn)、檢驗(yàn)、美化、格式化工具:
http://tools.jb51.net/code/json
JSON在線格式化工具:
http://tools.jb51.net/code/jsonformat
在線json壓縮/轉(zhuǎn)義工具:
http://tools.jb51.net/code/json_yasuo_trans
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery操作xml技巧總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery 解析xml文件
- JQuery解析HTML、JSON和XML實(shí)例詳解
- jQuery+ajax讀取并解析XML文件的方法
- 使用jquery解析XML的方法
- jQuery 行級(jí)解析讀取XML文件(附源碼)
- JQuery解析XML數(shù)據(jù)的幾個(gè)簡(jiǎn)單實(shí)例
- jquery解析XML字符串和XML文件的方法說(shuō)明
- 用JQuery 實(shí)現(xiàn)AJAX加載XML并解析的腳本
- Jquery Ajax解析XML數(shù)據(jù)(同步及異步調(diào)用)簡(jiǎn)單實(shí)例
- JQuery解析XML的方法小結(jié)
- jQuery實(shí)現(xiàn)的解析本地 XML 文檔操作示例
相關(guān)文章
JQuery中基礎(chǔ)過(guò)濾選擇器用法實(shí)例分析
這篇文章主要介紹了JQuery中基礎(chǔ)過(guò)濾選擇器用法,涉及jQuery屬性選擇及樣式操作的相關(guān)技巧,需要的朋友可以參考下2015-05-05
使用jquery動(dòng)態(tài)加載js文件的方法
這篇文章主要介紹了使用jquery動(dòng)態(tài)加載js文件的方法,需要的朋友可以參考下2014-12-12
js前臺(tái)判斷開(kāi)始時(shí)間是否小于結(jié)束時(shí)間
js前臺(tái)判斷開(kāi)始時(shí)間是否小于結(jié)束時(shí)間,結(jié)合了jquery需要的朋友可以參考下2012-02-02
jquery動(dòng)態(tài)加載js/css文件方法(自寫(xiě)小函數(shù))
jquery自帶的getSrcript文件只能動(dòng)態(tài)加載js代碼,但不能加載css,后來(lái)自己寫(xiě)了一個(gè)可加載js與css的程序2014-10-10
jQuery實(shí)現(xiàn)帶展開(kāi)動(dòng)畫(huà)的導(dǎo)航欄效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)帶展開(kāi)動(dòng)畫(huà)的導(dǎo)航欄效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-07-07
jQuery懸停文字提示框插件jquery.tooltipster.js用法示例【附demo源碼下載】
這篇文章主要介紹了jQuery懸停文字提示框插件jquery.tooltipster.js用法,涉及jQuery文字提示框插件的引入與調(diào)用實(shí)現(xiàn)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2016-07-07
使用FlexiGrid實(shí)現(xiàn)Extjs表格效果方法分享
這篇文章主要分享了使用FlexiGrid實(shí)現(xiàn)Extjs表格效果方法,非常的實(shí)用,這里推薦給有相同需求的小伙伴2014-12-12
jQuery實(shí)現(xiàn)的感應(yīng)鼠標(biāo)懸停圖片色彩漸顯效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)的感應(yīng)鼠標(biāo)懸停圖片色彩漸顯效果,涉及jQuery中hover、find、css等方法的使用技巧,需要的朋友可以參考下2015-03-03

