jquery JSON的解析方式
更新時間:2009年07月25日 14:29:04 作者:
第一次用JSON作為jquery異步請求的傳輸對象,結(jié)果在jquery請求后返回的結(jié)果是字符串還是json對象上折騰了半天。等到問題解決了,也大致明白怎么個意思了,歸根結(jié)底還是對jquery對相關(guān)json對象獲取的理解有所偏差。
這里考慮都考慮的是服務(wù)器返回的是JSON形式的字符串的形式,對于利用JSONObject等插件封裝的JSON對象,與此亦是大同小異,這里不再做說明。
這里首先給出JSON字符串集,字符串集如下:
var data="
{
root:
[
{name:'1',value:'0'},
{name:'6101',value:'西安市'},
{name:'6102',value:'銅川市'},
{name:'6103',value:'寶雞市'},
{name:'6104',value:'咸陽市'},
{name:'6105',value:'渭南市'},
{name:'6106',value:'延安市'},
{name:'6107',value:'漢中市'},
{name:'6108',value:'榆林市'},
{name:'6109',value:'安康市'},
{name:'6110',value:'商洛市'}
]
}";
這里以jquery異步獲取的數(shù)據(jù)類型——json對象和字符串為依據(jù),分別介紹兩種方式獲取到的結(jié)果處理方式。
1.對于服務(wù)器返回的JSON字符串,如果jquery異步請求沒做類型說明,或者以字符串方式接受,那么需要做一次對象化處理,方式不是太麻煩,就是將該字符串放于eval()中執(zhí)行一次。這種方式也適合以普通javascipt方式獲取json對象,以下舉例說明:
var dataObj=eval("("+data+")");//轉(zhuǎn)換為json對象
alert(dataObj.root.length);//輸出root的子對象數(shù)量
$.each(dataObj.root,fucntion(idx,item){
if(idx==0){
return true;
}
//輸出每個root子對象的名稱和值
alert("name:"+item.name+",value:"+item.value);
})
注:對于一般的js生成json對象,只需要將$.each()方法替換為for語句即可,其他不變。
2.對于服務(wù)器返回的JSON字符串,如果jquery異步請求將type(一般為這個配置屬性)設(shè)為“json”,或者利用$.getJSON()方法獲得服務(wù)器返回,那么就不需要eval()方法了,因為這時候得到的結(jié)果已經(jīng)是json對象了,只需直接調(diào)用該對象即可,這里以$.getJSON方法為例說明數(shù)據(jù)處理方法:
$.getJSON("http://gaoyusi.blog.163.com/",{param:"gaoyusi"},function(data){
//此處返回的data已經(jīng)是json對象
//以下其他操作同第一種情況
$.each(data.root,function(idx,item){
if(idx==0){
return true;//同countinue,返回false同break
}
alert("name:"+item.name+",value:"+item.value);
});
});
這里特別需要注意的是方式1中的eval()方法是動態(tài)執(zhí)行其中字符串(可能是js腳本)的,這樣很容易會造成系統(tǒng)的安全問題。所以可以采用一些規(guī)避了eval()的第三方客戶端腳本庫,比如JSON in JavaScript就提供了一個不超過3k的腳本庫。
這里首先給出JSON字符串集,字符串集如下:
復(fù)制代碼 代碼如下:
var data="
{
root:
[
{name:'1',value:'0'},
{name:'6101',value:'西安市'},
{name:'6102',value:'銅川市'},
{name:'6103',value:'寶雞市'},
{name:'6104',value:'咸陽市'},
{name:'6105',value:'渭南市'},
{name:'6106',value:'延安市'},
{name:'6107',value:'漢中市'},
{name:'6108',value:'榆林市'},
{name:'6109',value:'安康市'},
{name:'6110',value:'商洛市'}
]
}";
這里以jquery異步獲取的數(shù)據(jù)類型——json對象和字符串為依據(jù),分別介紹兩種方式獲取到的結(jié)果處理方式。
1.對于服務(wù)器返回的JSON字符串,如果jquery異步請求沒做類型說明,或者以字符串方式接受,那么需要做一次對象化處理,方式不是太麻煩,就是將該字符串放于eval()中執(zhí)行一次。這種方式也適合以普通javascipt方式獲取json對象,以下舉例說明:
var dataObj=eval("("+data+")");//轉(zhuǎn)換為json對象
alert(dataObj.root.length);//輸出root的子對象數(shù)量
$.each(dataObj.root,fucntion(idx,item){
if(idx==0){
return true;
}
//輸出每個root子對象的名稱和值
alert("name:"+item.name+",value:"+item.value);
})
注:對于一般的js生成json對象,只需要將$.each()方法替換為for語句即可,其他不變。
2.對于服務(wù)器返回的JSON字符串,如果jquery異步請求將type(一般為這個配置屬性)設(shè)為“json”,或者利用$.getJSON()方法獲得服務(wù)器返回,那么就不需要eval()方法了,因為這時候得到的結(jié)果已經(jīng)是json對象了,只需直接調(diào)用該對象即可,這里以$.getJSON方法為例說明數(shù)據(jù)處理方法:
$.getJSON("http://gaoyusi.blog.163.com/",{param:"gaoyusi"},function(data){
//此處返回的data已經(jīng)是json對象
//以下其他操作同第一種情況
$.each(data.root,function(idx,item){
if(idx==0){
return true;//同countinue,返回false同break
}
alert("name:"+item.name+",value:"+item.value);
});
});
這里特別需要注意的是方式1中的eval()方法是動態(tài)執(zhí)行其中字符串(可能是js腳本)的,這樣很容易會造成系統(tǒng)的安全問題。所以可以采用一些規(guī)避了eval()的第三方客戶端腳本庫,比如JSON in JavaScript就提供了一個不超過3k的腳本庫。
您可能感興趣的文章:
- Json對象與Json字符串互轉(zhuǎn)(4種轉(zhuǎn)換方式)
- js 將json字符串轉(zhuǎn)換為json對象的方法解析
- js中將字符串轉(zhuǎn)換成json的三種方式
- 解析JSON對象與字符串之間的相互轉(zhuǎn)換
- JS對象與JSON格式數(shù)據(jù)相互轉(zhuǎn)換
- 用jQuery與JSONP輕松解決跨域訪問的問題
- jquery eval解析JSON中的注意點介紹
- JS 將偽數(shù)組轉(zhuǎn)換成數(shù)組的實現(xiàn)示例
- JavaScript如何將偽數(shù)組轉(zhuǎn)換成數(shù)組?
- JavaScript將數(shù)組轉(zhuǎn)換為鏈表的方法
- js實現(xiàn)數(shù)組轉(zhuǎn)換成json
- JavaScript將數(shù)組轉(zhuǎn)為對象與JSON對象字符串轉(zhuǎn)數(shù)組方法詳解
相關(guān)文章
使用element-ui的el-menu導(dǎo)航選中后刷新頁面保持當(dāng)前選中狀態(tài)
這篇文章主要介紹了使用element-ui的el-menu導(dǎo)航選中后刷新頁面保持當(dāng)前選中狀態(tài),本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07擴(kuò)展jquery easyui tree的搜索樹節(jié)點方法(推薦)
下面小編就為大家?guī)硪黄獢U(kuò)展jquery easyui tree的搜索樹節(jié)點方法(推薦)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10基于jQuery實現(xiàn)仿微博發(fā)布框字?jǐn)?shù)提示
這篇文章主要為大家詳細(xì)介紹了基于jQuery實現(xiàn)仿微博發(fā)布框字?jǐn)?shù)提示的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-07-07jQuery使用動態(tài)渲染表單功能完成ajax文件下載
使用ajax實現(xiàn)文件下載,方便,快捷,時尚,多么有挑戰(zhàn)的一個功能,首先獲取url和data然后把參數(shù)組裝成form的input再利用request發(fā)送請求,也就是動態(tài)渲染表單,提交表單后再刪除,本例將實現(xiàn)文件下載功能,感興趣的朋友可以聊解下2013-01-01