先給大家說(shuō)下我的需求:進(jìn)行ajax請(qǐng)求后,后臺(tái)傳遞回來(lái)以下json數(shù)據(jù)。
具體實(shí)現(xiàn)代碼如下所示:
JavaScript代碼
{ "data":[ {"id":"1","name":"選擇A","value":"A"}, {"id":"2","name":"選擇B","value":"B"}, {"id":"3","name":"選擇C","value":"C"} ] }
對(duì)上面的json數(shù)據(jù)類在jquery 的success 函數(shù)中解析
JavaScript代碼
$.ajax({ type: "POST", url: "xxx.do", dataType : "json", // 指定返回類型 data: {xxx:"yyy"}, // 傳遞到后臺(tái)的參數(shù) success: function(data) { $.each(data, function(index,values){ // 解析出data對(duì)應(yīng)的Object數(shù)組 $.each(values,function(index2,value){ // 遍歷Object數(shù)組 ,每個(gè)對(duì)象的值存放在value ,index2表示為第幾個(gè)對(duì)象 // 根據(jù)自己的邏輯進(jìn)行數(shù)據(jù)的處理 alert(value.name + " " + value.value); // TODO: 邏輯 }); }); }, error : function() { alert("系統(tǒng)出現(xiàn)問(wèn)題"); } });
繼續(xù)來(lái)個(gè)例子
本章節(jié)分享一段代碼實(shí)例,是jQuery封裝的ajax對(duì)JSON數(shù)據(jù)的請(qǐng)求處理。
代碼比較簡(jiǎn)單,對(duì)于有經(jīng)驗(yàn)的人員來(lái)說(shuō)可以掠過(guò),初學(xué)者可以做一下參考之用。
代碼如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>腳本之家</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $(document).ready(function(){ $("#bt").click(function(){ $.ajax({ type: "get", dataType: "json", url: "demo/jQuery/ajax/txt/json.txt", success: function(msg){ var data = msg str=""; $.each(data,function(index, n){ str=str+data[index].webName+","+data[index].url+","+data[index].age+"<br/>"; }); $("#show").html(str); } }); }) }) </script> </head> <body> <div id="show"></div> <input type="button" id="bt" value="查看效果"/> </body> </html>
以上所述是小編給大家介紹的jQuery ajax json 數(shù)據(jù)的遍歷代碼,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com