jQuery ajax json 數(shù)據(jù)的遍歷代碼
先給大家說下我的需求:進(jìn)行ajax請求后,后臺傳遞回來以下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"} ] }
對上面的json數(shù)據(jù)類在jquery 的success 函數(shù)中解析
JavaScript代碼
$.ajax({ type: "POST", url: "xxx.do", dataType : "json", // 指定返回類型 data: {xxx:"yyy"}, // 傳遞到后臺的參數(shù) success: function(data) { $.each(data, function(index,values){ // 解析出data對應(yīng)的Object數(shù)組 $.each(values,function(index2,value){ // 遍歷Object數(shù)組 ,每個(gè)對象的值存放在value ,index2表示為第幾個(gè)對象 // 根據(jù)自己的邏輯進(jìn)行數(shù)據(jù)的處理 alert(value.name + " " + value.value); // TODO: 邏輯 }); }); }, error : function() { alert("系統(tǒng)出現(xiàn)問題"); } });
繼續(xù)來個(gè)例子
本章節(jié)分享一段代碼實(shí)例,是jQuery封裝的ajax對JSON數(shù)據(jù)的請求處理。
代碼比較簡單,對于有經(jīng)驗(yàn)的人員來說可以掠過,初學(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ù)的遍歷代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- JQuery遍歷json數(shù)組的3種方法
- jquery對Json的各種遍歷方法總結(jié)(必看篇)
- 遍歷json獲得數(shù)據(jù)的幾種方法小結(jié)
- jQuery的ajax和遍歷數(shù)組json實(shí)例代碼
- jquery動態(tài)遍歷Json對象的屬性和值的方法
- jQuery篩選數(shù)組之grep、each、inArray、map的用法及遍歷json對象
- jQuery遍歷json的方法(推薦)
- jQuery通過ajax請求php遍歷json數(shù)組到table中的代碼(推薦)
- jquery遍歷json對象集合詳解
- jQuery使用$.each遍歷json數(shù)組的簡單實(shí)現(xiàn)方法
- jQuery遍歷json的方法分析
- jquery使用each方法遍歷json格式數(shù)據(jù)實(shí)例
- jQuery遍歷json中多個(gè)map的方法
- jquery遍歷篩選數(shù)組的幾種方法和遍歷解析json對象
- 通過Jquery遍歷Json的兩種數(shù)據(jù)結(jié)構(gòu)的實(shí)現(xiàn)代碼
- jQuery 遍歷json數(shù)組的實(shí)現(xiàn)代碼
- Javascript Jquery 遍歷Json的實(shí)現(xiàn)代碼
- Jquery遍歷Json數(shù)據(jù)的方法
相關(guān)文章
Ajax實(shí)現(xiàn)模擬關(guān)鍵字智能匹配搜索效果
這篇文章主要介紹了Ajax實(shí)現(xiàn)模擬關(guān)鍵字智能匹配搜索效果,當(dāng)在搜索框輸入內(nèi)容時(shí),根據(jù)關(guān)鍵字匹配,顯示彈出層,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-12-12ajax請求成功后新開窗口window.open()被攔截解決方法
ajax 異步請求成功后需要新開窗口打開 url,使用的是 window.open() 方法,但是很可惜被瀏覽器給攔截了,怎么解決這個(gè)問題呢2014-09-09JavaScript基于Ajax實(shí)現(xiàn)不刷新在網(wǎng)頁上動態(tài)顯示文件內(nèi)容
這篇文章主要介紹了JavaScript基于Ajax實(shí)現(xiàn)不刷新在網(wǎng)頁上動態(tài)顯示文件內(nèi)容,可實(shí)現(xiàn)實(shí)時(shí)顯示服務(wù)器上txt文件內(nèi)容的功能,是Ajax基本應(yīng)用,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03Ajax獲取到數(shù)據(jù)放入echarts里不顯示的原因分析及解決辦法
在做一個(gè)需要用到echarts地圖的項(xiàng)目的時(shí)候,成功通過ajax獲取到了后臺提供的數(shù)據(jù),并生成了想要的JSON串。但是,放到echarts option.series[0].data里,獲取不到數(shù)據(jù)。在生成的地圖上無法看到你從后臺獲取到的值,下面小編給大家分享我的解決辦法,需要的朋友參考下2016-01-01使用ajax實(shí)現(xiàn)無刷新改變頁面內(nèi)容和地址欄URL
本文主要詳細(xì)介紹了使用ajax和window.history.pushState無刷新改變頁面內(nèi)容和地址欄URL的方法,需要的朋友可以參考下2015-03-03Axios和Ajax的區(qū)別是什么(詳細(xì)介紹)
ajax技術(shù)實(shí)現(xiàn)了局部數(shù)據(jù)的刷新,axios實(shí)現(xiàn)了對ajax的封裝,axios有的ajax都有,ajax有的axios不一定有,總結(jié)一句話就是axios是ajax,ajax不止axios,本文對Axios和Ajax的區(qū)別是什么給大家講解的非常詳細(xì),需要的朋友一起看看吧2023-10-10