Jquery解析Json數(shù)組List方法大全
把json字符串變?yōu)閖son數(shù)組的方法總結(jié)：
眾所周知，在Js/Jquery中是可以使用json數(shù)組的，我們要想使用json數(shù)組，前提是要把接收到的json字符串轉(zhuǎn)為json數(shù)組哦。
下面站長就為大家總結(jié)了Jquery解析json的常用方法，希望對大家有幫助
本章方法講解：不明白的地方，加群@群主即可
1，Jquery發(fā)送Post/Get等Http請求， $.each直接解析Json數(shù)組
2，用eval解析json數(shù)組，$.each循環(huán)
3，用JSON.parse解析json數(shù)組，$.each循環(huán)
4，用JSON.parse解析json數(shù)組，for循環(huán)
5,用JSON.parse解析復(fù)雜json字符串（同時(shí)包含json對象和json數(shù)組的json字符串）
<!DOCTYPE >
<html>
<head>
<title>Jquery解析json數(shù)組List-Jsons.cn</title>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script> /*
把json字符串變?yōu)閖son數(shù)組的方法總結(jié)：
眾所周知，在Js/Jquery中是可以使用json數(shù)組的，我們要想使用json數(shù)組，
前提是要把接收到的json字符串轉(zhuǎn)為json數(shù)組哦。
下面站長就為大家總結(jié)了Jquery解析json的常用方法，希望對大家有幫助
本章方法講解：不明白的地方，加群@群主即可
1，Jquery發(fā)送Post/Get等Http請求， $.each直接解析Json數(shù)組
2，用eval解析json數(shù)組，$.each循環(huán)
3，用JSON.parse解析json數(shù)組，$.each循環(huán)
4，用JSON.parse解析json數(shù)組，for循環(huán)
5,用JSON.parse解析復(fù)雜json字符串（同時(shí)包含json對象和json數(shù)組的json字符串）
*/</script>
</head>
<body>
<script type="text/javascript">
//以下結(jié)果，請?jiān)赾onsole控制臺中查看（F12或者審查元素，即可進(jìn)入Console控制臺）
//第一種用法：Jquery接收Post/Get返回值， $.each直接解析Json數(shù)組
//（$.post，$.get，$.getJSON，$.ajax等等 解析json的原理都一樣）
$.post('你的URL', { action: 'GetList' }, function (data) {
//此post請求為異步，上面是模擬的測試地址，正式使用時(shí)，請換成自己的接口地址
//為了方便，在這里我直接賦值咯
data = [{ "Name": "Json在線工具", "ProUrl": "www.yunjson.com", "SiteInfo": "Json在線工具（http://www.yunjson.com）" }, { "Name": "Json在線解析", "ProUrl": "www.yunjson.com", "SiteInfo": "Json在線解析（http://www.yunjson.com）" }, { "Name": "Json在線格式化", "ProUrl": "www.yunjson.com", "SiteInfo": "Json在線格式化（http://www.yunjson.com）"}]
if (data) {
//接收數(shù)據(jù)成功，開始處理json對象（此時(shí)data就是接收到的json數(shù)組）
//現(xiàn)在我們可以得到j(luò)son數(shù)據(jù)中，需要循環(huán)得到每個(gè)json對象
//為了方便查看，直接在控制臺中打印出來咯
$.each(data, function (index, item) {
//此時(shí)可以得到每個(gè)json對象哦，接下來的操作就交給大家了
console.log(data.Name);
console.log(data.ProUrl);
console.log(data.SiteID);
console.log(data.SiteLink);
console.log(data.SiteInfo);
});
}
}, 'json');
//下面來模擬下輸出值（由于沒有測試地址，在下面就直接賦值了）
var data = [{ "Name": "Json在線工具", "ProUrl": "www.yunjson.com", "SiteInfo": "Json在線工具（http://www.yunjson.com）" }, { "Name": "Json在線解析", "ProUrl": "www.yunjson.com", "SiteInfo": "Json在線解析（http://www.yunjson.com）" }, { "Name": "Json在線格式化", "ProUrl": "www.yunjson.com", "SiteInfo": "Json在線格式化（http://www.yunjson.com）"}]
console.log("第一種用法：Jquery中，$.each直接解析Json數(shù)組");
$.each(data, function (index, item) {
var result = item.Name "--" item.ProUrl "--" item.SiteInfo; //拼接數(shù)據(jù)，輸出到控制臺展示
console.log(result);
});
console.log("\r\n-------------------------我是第一和二的方法分割線哦-----------------------------------------------------\r\n");
// ------------------------------我是第一和二的方法分割線哦----------------------------------------------------------
//第二種用法：用eval解析json數(shù)組（先用eval把json字符串變?yōu)閖son數(shù)組對象，在用$.each循環(huán)取值，得到每一個(gè)對象item）
var data = '[{ "Name": "Json在線工具", "ProUrl": "www.yunjson.com", "SiteInfo": "Json在線工具（http://www.yunjson.com）" }, { "Name": "Json在線解析", "ProUrl": "www.yunjson.com", "SiteInfo": "Json在線解析（http://www.yunjson.com）" }, { "Name": "Json在線格式化", "ProUrl": "www.yunjson.com", "SiteInfo": "Json在線格式化（http://www.yunjson.com）"}]';
var dataObj = eval('(' data ')'); //此時(shí)已變成json數(shù)組對象咯，下面可以直接用$.each循環(huán)取值啦
console.log("第二種用法：用eval解析json數(shù)組，$.each循環(huán)");
$.each(dataObj, function (index, item) {
var result = item.Name "--" item.ProUrl "--" item.SiteInfo; //拼接數(shù)據(jù)，輸出到控制臺展示
console.log(result);
});
console.log("\r\n-------------------------我是第二和三的方法分割線哦-----------------------------------------------------\r\n");
// ------------------------------我是第二和三的方法分割線哦----------------------------------------------------------
//第三種用法：用JSON.parse解析json數(shù)組（先用JSON.parse把json字符串變?yōu)閖son數(shù)組對象，在用$.each循環(huán)取值，得到每一個(gè)對象item）
var data = '[{ "Name": "Json在線工具", "ProUrl": "www.yunjson.com", "SiteInfo": "Json在線工具（http://www.yunjson.com）" }, { "Name": "Json在線解析", "ProUrl": "www.yunjson.com", "SiteInfo": "Json在線解析（http://www.yunjson.com）" }, { "Name": "Json在線格式化", "ProUrl": "www.yunjson.com", "SiteInfo": "Json在線格式化（http://www.yunjson.com）"}]';
var dataObj = JSON.parse(data); //此時(shí)已變成json數(shù)組對象咯，下面可以直接用$.each循環(huán)取值啦
console.log("第三種用法：用JSON.parse解析json數(shù)組，$.each循環(huán)");
$.each(dataObj, function (index, item) {
var result = item.Name "--" item.ProUrl "--" item.SiteInfo; //拼接數(shù)據(jù)，輸出到控制臺展示
console.log(result);
});
console.log("\r\n-------------------------我是第三和四的方法分割線哦-----------------------------------------------------\r\n");
// ------------------------------我是第三和四的方法分割線哦----------------------------------------------------------
//第四種用法：用JSON.parse解析json數(shù)組（先用JSON.parse把json字符串變?yōu)閖son數(shù)組對象，在用for循環(huán)取值，得到每一個(gè)對象item）
var data = '[{ "Name": "Json在線工具", "ProUrl": "www.yunjson.com", "SiteInfo": "Json在線工具（http://www.yunjson.com）" }, { "Name": "Json在線解析", "ProUrl": "www.yunjson.com", "SiteInfo": "Json在線解析（http://www.yunjson.com）" }, { "Name": "Json在線格式化", "ProUrl": "www.yunjson.com", "SiteInfo": "Json在線格式化（http://www.yunjson.com）"}]';
var dataObj = JSON.parse(data); //此時(shí)已變成json數(shù)組對象咯，下面可以直接用for循環(huán)取值啦
console.log("第四種用法：用JSON.parse解析json數(shù)組，for循環(huán)");
for (var i = 0; i < dataObj.length; i ) {
var result = dataObj[i].Name "--" dataObj[i].ProUrl "--" dataObj[i].SiteInfo; //拼接數(shù)據(jù)，輸出到控制臺展示
console.log(result);
}
/*備注：
不管是eval還是JSON.parse 把json字符串轉(zhuǎn)換為json數(shù)組對象后，
都需要用$.each或者for循環(huán)，進(jìn)行調(diào)取數(shù)據(jù)哦
*/
console.log("\r\n-------------------------我是第四和五的方法分割線哦-----------------------------------------------------\r\n");
// ------------------------------我是第四和五的方法分割線哦----------------------------------------------------------
//第五種用法：用JSON.parse解析復(fù)雜json字符串
//（先用JSON.parse把復(fù)雜的json字符串變?yōu)閖son對象，在用for或者$.each循環(huán)取得里面的json數(shù)組，得到每一個(gè)對象）
var data = '{"Name":"Json在線解析","ProUrl":"www.yunjson.com","SiteID":1472222,"SiteLink":"官方QQ群：308250404","SiteList":[{"Name":"Json在線工具","ProUrl":"www.yunjson.com","SiteInfo":"Json在線工具（http://www.yunjson.com）"},{"Name":"Json在線解析","ProUrl":"www.yunjson.com","SiteInfo":"Json在線解析（http://www.yunjson.com）"},{"Name":"Json在線格式化","ProUrl":"www.yunjson.com","SiteInfo":"Json在線格式化（http://www.yunjson.com）"}]}';
var dataObj = JSON.parse(data); //此時(shí)已變成json對象咯，下面可以直接得到j(luò)son對象的值 和 json數(shù)組對象， 直接用$.each循環(huán)json數(shù)組對象取值啦
//得到單個(gè)json對象
console.log("第五種用法：用JSON.parse解析復(fù)雜json字符串，$.each循環(huán)");
console.log("得到j(luò)son單個(gè)對象");
console.log("Name:--" dataObj.Name);
console.log("ProUrl:--" dataObj.ProUrl);
console.log("SiteID:--" dataObj.SiteID);
console.log("得到j(luò)son數(shù)組對象");
$.each(dataObj.SiteList, function (index, item) {
var result = item.Name "--" item.ProUrl "--" item.SiteInfo; //拼接數(shù)據(jù)，輸出到控制臺展示
console.log(result);
});
/*
現(xiàn)在看看復(fù)雜的json解析也不過如此吧，現(xiàn)在你已經(jīng)掌握了jquery解析json的方法咯，大膽的在項(xiàng)目中運(yùn)用吧?。?！
*/
</script>
</body>
</html>
原文鏈接：Jquery解析Json數(shù)組List方法大全