麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 編程 > JavaScript > 正文

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

2019-11-20 22:25:55
字體:
來源:轉載
供稿:網友

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

我們先以解析上例中的comments對象的JSON數據為例,然后再小結jQuery中解析JSON數據的方法。

上例中得到的JSON數據如下,是一個嵌套JSON:

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

獲取JSON數據,在jQuery中有一個簡單的方法 $.getJSON() 可以實現。

下面引用的是官方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.

回調函數中接受三個參數,第一個書返回的數據,第二個是狀態,第三個是jQuery的XMLHttpRequest,我們只使用到第一個參數。

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

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()方法接受兩個參數,第一個是需要遍歷的對象集合(JSON對象集合),第二個是用來遍歷的方法,這個方法又接受兩個參數,第一個是遍歷的index,第二個是當前遍歷的值。哈哈,有了$.each()方法JSON的解析就迎刃而解咯。(*^__^*) 嘻嘻……

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

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

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

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

上例的運行結果如下:

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

{ "comments": [  {   "content": "很不錯嘛",   "id": 1,   "nickname": "納尼"  },  {   "content": "喲西喲西",   "id": 2,   "nickname": "小強"  } ], "content": "你是木頭人,哈哈。", "infomap": {  "性別": "男",  "職業": "程序員",  "博客": "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數據  $.each(data.infomap,function(key,value){   $("#mapinfo").append(key+"----"+value+"<br/><hr/>");  });  //解析數組  $.each(data.comments, function(i, item) {   $("#info").append(     "<div>" + item.id + "</div>" +      "<div>" + item.nickname + "</div>" +     "<div>" + item.content + "</div><hr/>");  });  });}

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

上例的運行效果:

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

下面是其他網友的補充:

一、jQuery解析Json數據格式:

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

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

通常情況下,你可以從后臺返回JSON數據,前臺就交給jQuery啦,哈哈??!
jquery異步請求將type(一般為這個配置屬性)設為“json”,或者利用$.getJSON()方法獲得服務器返回,那么就不
需要eval()方法了,因為這時候得到的結果已經是json對象了,只需直接調用該對象即可,這里以$.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已經是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”,這需要一個標準的JSON字符串,并返回生成的JavaScript對象。讓我們來看
看語法:

data = $.parseJSON(string);
看看它是如何運用的到實際開發中的:

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

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

在線JSON代碼檢驗、檢驗、美化、格式化工具:
http://tools.VeVB.COm/code/json

JSON在線格式化工具:
http://tools.VeVB.COm/code/jsonformat

在線XML/JSON互相轉換工具:
http://tools.VeVB.COm/code/xmljson

json代碼在線格式化/美化/壓縮/編輯/轉換工具:
http://tools.VeVB.COm/code/jsoncodeformat

在線json壓縮/轉義工具:
http://tools.VeVB.COm/code/json_yasuo_trans

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 黄色久 | 黄色片免费看网站 | 美女在线视频一区二区 | 毛片一级免费看 | 激情亚洲网| 精品国产91久久久 | 性欧美大战久久久久久久免费观看 | 女人a级毛片 | 免费a级毛片永久免费 | 久草最新 | 麻豆视频国产在线观看 | 视频一区二区中文字幕 | 亚洲99| 看个毛片| 国产乱弄 | 国产精品美女久久久久久不卡 | 日韩精品a在线观看 | 国产午夜精品一区二区三区四区 | 91精品国产网站 | 欧美a级一区二区 | 日本综合久久 | 中文在线日韩 | 欧美日本色 | 美国一级黄色毛片 | 成人黄视频在线观看 | 国产品久久| 国产在线1区 | 成人在线免费视频播放 | 欧美日韩亚洲在线观看 | 久久黄色影院 | 精品人人人人 | 国产一级做a | 毛片在哪里看 | 免费看成年人视频在线 | 久久99精品久久久久久秒播放器 | 精品一区二区三区不卡 | 欧美jizzhd极品欧美 | 免费毛片在线视频 | 国产精品一品二区三区四区18 | 欧美精品一级 | 色婷婷一区二区三区 |