欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery怎么解析Json字符串(Json格式/Json對象)

 更新時(shí)間:2013年08月09日 11:28:00   投稿:whsnow  
可以利用jquery或js解析json數(shù)據(jù),下面與大家分享下jquery解析json字符串方法,一個(gè)是解析Json格式,一個(gè)是解析Json對象,感興趣的朋友可以學(xué)習(xí)下

json數(shù)據(jù)是我們常用的一種小型的數(shù)據(jù)實(shí)時(shí)交換的一個(gè)東西,他可以利用jquery或js進(jìn)行解析,下面我來介紹jquery解析json字符串方法。

我們先以解析上例中的comments對象的JSON數(shù)據(jù)為例,然后再小結(jié)jQuery中解析JSON數(shù)據(jù)的方法。

上例中得到的JSON數(shù)據(jù)如下,是一個(gè)嵌套JSON:

{
 "comments": [
  {
   "content": "很不錯嘛",
   "id": 1,
   "nickname": "納尼"
  },
  {
   "content": "喲西喲西",
   "id": 2,
   "nickname": "小強(qiáng)"
  }
 ]
}

獲取JSON數(shù)據(jù),在jQuery中有一個(gè)簡單的方法 $.getJSON() 可以實(shí)現(xiàn)。

下面引用的是官方API對$.getJSON()的說明:

jQuery.getJSON( url, [data,] [success(data, textStatus, jqXHR)] )
urlA string containing the URL to which the request is sent.

dataA map or string that is sent to the server with the request.

success(data, textStatus, jqXHR)A callback function that is executed if the request succeeds.

回調(diào)函數(shù)中接受三個(gè)參數(shù),第一個(gè)書返回的數(shù)據(jù),第二個(gè)是狀態(tài),第三個(gè)是jQuery的XMLHttpRequest,我們只使用到第一個(gè)參數(shù)。

$.each()是用來在回調(diào)函數(shù)中解析JSON數(shù)據(jù)的方法,下面是官方文檔:

jQuery.each( collection, callback(indexInArray, valueOfElement) )
collectionThe object or array to iterate over.

callback(indexInArray, valueOfElement)The function that will be executed on every object.

$.each()方法接受兩個(gè)參數(shù),第一個(gè)是需要遍歷的對象集合(JSON對象集合),第二個(gè)是用來遍歷的方法,這個(gè)方法又接受兩個(gè)參數(shù),第一個(gè)是遍歷的index,第二個(gè)是當(dāng)前遍歷的值。哈哈,有了$.each()方法JSON的解析就迎刃而解咯。(*^__^*) 嘻嘻……

function loadInfo() {
 $.getJSON("loadInfo", function(data) {
  $("#info").html("");//清空info內(nèi)容
  $.each(data.comments, function(i, item) {
   $("#info").append(
     "<div>" + item.id + "</div>" + 
     "<div>" + item.nickname + "</div>" +
     "<div>" + item.content + "</div><hr/>");
  });
  });
}

正如上面,loadinfo是請求的地址,function(data){...}就是在請求成功后的回調(diào)函數(shù),data封裝了返回的JSON對象,在下面的$.each(data.comments,function(i,item){...})方法中data.comments直接到達(dá)JSON數(shù)據(jù)內(nèi)包含的JSON數(shù)組:

[
 {
  "content": "很不錯嘛",
  "id": 1,
  "nickname": "納尼"
 },
 {
  "content": "喲西喲西",
  "id": 2,
  "nickname": "小強(qiáng)"
 }
]

$.each()方法中的function就是對這個(gè)數(shù)組進(jìn)行遍歷,再通過操作DOM插入到合適的地方的。在遍歷的過程中,我們可以很方便的訪問當(dāng)前遍歷index(代碼中的”i“)和當(dāng)前遍歷的值(代碼中的”item“)。

上例的運(yùn)行結(jié)果如下:

如果返回的JSON數(shù)據(jù)比較復(fù)雜,則只需多些$.each()進(jìn)行遍歷即可,嘿嘿。例如如下JSON數(shù)據(jù):

{
 "comments": [
  {
   "content": "很不錯嘛",
   "id": 1,
   "nickname": "納尼"
  },
  {
   "content": "喲西喲西",
   "id": 2,
   "nickname": "小強(qiáng)"
  }
 ],
 "content": "你是木頭人,哈哈。",
 "infomap": {
  "性別": "男",
  "職業(yè)": "程序員",
  "博客": "http://www.cnblogs.com/codeplus/"
 },
 "title": "123木頭人"
}

js如下:

function loadInfo() {
 $.getJSON("loadInfo", function(data) {
  $("#title").append(data.title+"<hr/>");
  $("#content").append(data.content+"<hr/>");
  //jquery解析map數(shù)據(jù)
  $.each(data.infomap,function(key,value){
   $("#mapinfo").append(key+"----"+value+"<br/><hr/>");
  });
  //解析數(shù)組
  $.each(data.comments, function(i, item) {
   $("#info").append(
     "<div>" + item.id + "</div>" + 
     "<div>" + item.nickname + "</div>" +
     "<div>" + item.content + "</div><hr/>");
  });
  });
}

值得注意的是,$.each()遍歷Map的時(shí)候,function()中的參數(shù)是key和value,十分方便。

上例的運(yùn)行效果:

jQuery很強(qiáng)大,so...更多的了解還得參考文檔,(ˇˍˇ) 想~

下面是其他網(wǎng)友的補(bǔ)充:

一、jQuery解析Json數(shù)據(jù)格式:

使用這種方法,你必須在Ajax請求中設(shè)置參數(shù):
1 dataType: "json"
獲取通過回調(diào)函數(shù)返回的數(shù)據(jù)并解析得到我們想要的值,看源碼:

jQuery.ajax({ 
url: full_url, 
dataType: "json", 
success: function(results) { 
alert(result.name); 
} }); 

通常情況下,你可以從后臺返回JSON數(shù)據(jù),前臺就交給jQuery啦,哈哈?。?
jquery異步請求將type(一般為這個(gè)配置屬性)設(shè)為“json”,或者利用$.getJSON()方法獲得服務(wù)器返回,那么就不
需要eval()方法了,因?yàn)檫@時(shí)候得到的結(jié)果已經(jīng)是json對象了,只需直接調(diào)用該對象即可,這里以$.getJSON方法為
例說

例1
代碼如下:

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

$.getJSON("http://sanic.cnblogs.com/",{param:"sanic"},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); 
}); 
}); 

二、jQuery解析Json對象:

jQuery提供了另一種方法“parseJSON”,這需要一個(gè)標(biāo)準(zhǔn)的JSON字符串,并返回生成的JavaScript對象。讓我們來看
看語法:

data = $.parseJSON(string);
看看它是如何運(yùn)用的到實(shí)際開發(fā)中的:

jQuery.ajax({ 
url: dataURL, success: function(results) { 
var parsedJson = jQuery.parseJSON(results); 
alert(parsedJson.name); 
} 
}); 

PS:關(guān)于json操作,這里再為大家推薦幾款比較實(shí)用的json在線工具供大家參考使用:

在線JSON代碼檢驗(yàn)、檢驗(yàn)、美化、格式化工具:
http://tools.jb51.net/code/json

JSON在線格式化工具:
http://tools.jb51.net/code/jsonformat

在線XML/JSON互相轉(zhuǎn)換工具:
http://tools.jb51.net/code/xmljson

json代碼在線格式化/美化/壓縮/編輯/轉(zhuǎn)換工具:
http://tools.jb51.net/code/jsoncodeformat

在線json壓縮/轉(zhuǎn)義工具:
http://tools.jb51.net/code/json_yasuo_trans

  • jquery?操作DOM的基本用法分享

    jquery?操作DOM的基本用法分享

    jquery?操作DOM的基本用法分享,使用jquery的朋友可以參考下,方便以后對dom操作
    2012-04-04
  • 與jquery serializeArray()一起使用的函數(shù),主要來方便提交表單

    與jquery serializeArray()一起使用的函數(shù),主要來方便提交表單

    與jquery serializeArray()一起使用的函數(shù),主要來方便提交表單,需要的朋友可以參考下。
    2011-01-01
  • jQuery中:gt選擇器用法實(shí)例

    jQuery中:gt選擇器用法實(shí)例

    這篇文章主要介紹了jQuery中:gt選擇器用法,實(shí)例分析了:gt選擇器的功能、定義及匹配大于給定索引值元素的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2014-12-12
  • jQuery Ajax全解析

    jQuery Ajax全解析

    本文主要介紹了Ajax基本概念;Ajax的異步加載局部刷新功能的實(shí)現(xiàn);通過XMLHttpRequest發(fā)送請求。具有很好的參考價(jià)值,下面跟著小編一起來看下吧
    2017-02-02
  • jQuery插件簡單學(xué)習(xí)實(shí)例教程

    jQuery插件簡單學(xué)習(xí)實(shí)例教程

    這篇文章主要介紹了jQuery插件的簡單用法,列舉了分頁插件、放大鏡插件、自動完成插件、上傳插件、日歷插件等的簡單使用方法,需要的朋友可以參考下
    2016-07-07
  • 使用jQuery操作Cookies的實(shí)現(xiàn)代碼

    使用jQuery操作Cookies的實(shí)現(xiàn)代碼

    Cookies是一種能夠讓網(wǎng)站服務(wù)器把少量數(shù)據(jù)儲存到客戶端的硬盤或內(nèi)存,或是從客戶端的硬盤讀取數(shù)據(jù)的一種技術(shù)
    2011-10-10
  • 實(shí)例講解jQuery EasyUI tree中state屬性慎用

    實(shí)例講解jQuery EasyUI tree中state屬性慎用

    本文通過實(shí)例代碼給大家介紹jQuery EasyUI tree中state屬性慎用,切忌把state設(shè)置為closed,否則該節(jié)點(diǎn)會加載整個(gè)tree,形成死循環(huán)
    2016-04-04
  • jQuery實(shí)現(xiàn)簡單評論區(qū)功能

    jQuery實(shí)現(xiàn)簡單評論區(qū)功能

    這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡單評論區(qū)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-10-10
  • JSON中key動態(tài)設(shè)置及JSON.parse和JSON.stringify()的區(qū)別

    JSON中key動態(tài)設(shè)置及JSON.parse和JSON.stringify()的區(qū)別

    這篇文章主要介紹了JSON中key動態(tài)設(shè)置及JSON.parse和JSON.stringify()的區(qū)別講解,非常不錯,具有參考借鑒價(jià)值,需要的朋友參考下
    2016-12-12
  • 最新評論