Jquery解析Json對象方法總結(jié)大全
把json字符串變?yōu)閖son對象的方法總結(jié)：
眾所周知，在Js/Jquery中是可以使用json對象的，我們要想使用json對象，前提是要把接收到的json字符串轉(zhuǎn)為json對象哦。
下面站長就為大家總結(jié)了Jquery解析json的常用方法，希望對大家有幫助
本章方法講解：不明白的地方，加群@群主即可
1，Jquery發(fā)送Post/Get請求，直接解析Json數(shù)據(jù)（json對象）
2，用eval解析json字符串對象
<!DOCTYPE html>
<html>
<head>
<title>Jquery解析Json對象-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對象的方法總結(jié)：
眾所周知，在Js/Jquery中是可以使用json對象的，我們要想使用json對象，
前提是要把接收到的json字符串轉(zhuǎn)為json對象哦。
下面站長就為大家總結(jié)了Jquery解析json的常用方法，希望對大家有幫助
本章方法講解：不明白的地方，加群@群主即可
1，Jquery發(fā)送Post/Get請求，直接解析Json數(shù)據(jù)（json對象）
2，用eval解析json字符串對象
3，用JSON.parse 解析json對象
*/</script>
</head>
<body>
<script type="text/javascript">
//以下結(jié)果，請在console控制臺中查看（F12或者審查元素，即可進入Console控制臺）
//第一種用法：Jquery接收Post/Get返回值，解析Json數(shù)據(jù)
//（$.post，$.get，$.getJSON，$.ajax等等 解析json的原理都一樣）
$.post('你的URL', { action: 'GetList' }, function (data) {
//此post請求為異步，上面是模擬的測試地址，正式使用時，請換成自己的接口地址
//為了方便，在這里我就直接模擬出json對象數(shù)據(jù)，直接賦值咯（小盆友不要學我懶省事，哈哈）
data = { "Name": "Json在線解析", "ProUrl": "www.yunjson.com", "SiteID": 1472222, "SiteLink": "官方QQ群：308250404", "SiteInfo": "Json在線工具（http://www.yunjson.com），Json學習資料專題模塊，只為你提供最好的Json學習資料，感謝你的支持" };
if (data) {
//接收數(shù)據(jù)成功，開始處理json對象（此時data就是接收到的json對象）
//現(xiàn)在我們可以得到json數(shù)據(jù)中，我們需要的某些字段值了
//為了方便查看，直接在控制臺中打印出來咯
console.log(data.Name);
console.log(data.ProUrl);
console.log(data.SiteID);
console.log(data.SiteLink);
console.log(data.SiteInfo);
}
}, 'json');
//PS：以上請求中解析json的操作原理，可以簡化的表示為以下方法
//定義一個json對象，然后，直接取值（對象.方法名）
var data = { "Name": "Json在線解析", "ProUrl": "www.yunjson.com", "SiteID": 1472222, "SiteLink": "官方QQ群：308250404", "SiteInfo": "Json在線工具（http://www.yunjson.com），Json學習資料專題模塊，只為你提供最好的Json學習資料，感謝你的支持" };
console.log(data);
console.log("第一種用法：Jquery用Post/Get調(diào)用Json數(shù)據(jù)");
console.log("Name:--" data.Name);
console.log("ProUrl:--" data.ProUrl);
console.log("SiteID:--" data.SiteID);
console.log("SiteLink:--" data.SiteLink);
console.log("SiteInfo:--" data.SiteInfo);
console.log("\r\n-------------------------我是第一和二的方法分割線哦-----------------------------------------------------\r\n");
// ------------------------------我是第一和二的方法分割線哦----------------------------------------------------------
//第二種用法：用eval解析json對象（需要引用jquery插件）
var jsonstr = '{ "Name": "Json在線解析", "ProUrl": "www.yunjson.com", "SiteID": 1472222, "SiteLink": "官方QQ群：308250404", "SiteInfo": "Json在線工具（http://www.yunjson.com），Json學習資料專題模塊，只為你提供最好的Json學習資料，感謝你的支持" }';
evalfun(jsonstr)
function evalfun(jsonstr) {
var jsoninfo = eval('(' jsonstr ')'); //此時為json對象，下面可直接調(diào)用
console.log(jsoninfo);
console.log("第二種用法：用eval解析json對象,結(jié)果值如下");
console.log("Name:--" jsoninfo.Name);
console.log("ProUrl:--" jsoninfo.ProUrl);
console.log("SiteID:--" jsoninfo.SiteID);
console.log("SiteLink:--" jsoninfo.SiteLink);
console.log("SiteInfo:--" jsoninfo.SiteInfo);
}
console.log("\r\n-------------------------我是第二和三的方法分割線哦-----------------------------------------------------\r\n");
// ------------------------------我是第二和三的方法分割線哦----------------------------------------------------------
//第三種用法：使用JSON.parse 解析json對象（需要引用jquery插件）
var jsonstr = '{ "Name": "Json在線解析", "ProUrl": "www.yunjson.com", "SiteID": 1472222, "SiteLink": "官方QQ群：308250404", "SiteInfo": "Json在線工具（http://www.yunjson.com），Json學習資料專題模塊，只為你提供最好的Json學習資料，感謝你的支持" }';
jsonparse(jsonstr);
function jsonparse(jsonstr) {
var jsonrest = JSON.parse(jsonstr); //此時為json對象，下面可直接調(diào)用
console.log(jsonrest);
console.log("第三種方法：使用JSON.parse 解析json對象");
console.log("Name:--" jsonrest.Name);
console.log("ProUrl:--" jsonrest.ProUrl);
console.log("SiteID:--" jsonrest.SiteID);
console.log("SiteLink:--" jsonrest.SiteLink);
console.log("SiteInfo:--" jsonrest.SiteInfo);
}
</script>
</body>
</html>
原文鏈接：Jquery解析Json對象方法總結(jié)大全