Jquery解析Json對象方法總結大全

 把json字符串變為json對象的方法總結:

眾所周知,在Js/Jquery中是可以使用json對象的,我們要想使用json對象,
 前提是要把接收到的json字符串轉為json對象哦。
下面站長就為大家總結了Jquery解析json的常用方法,希望對大家有幫助

本章方法講解:不明白的地方,加群@群主即可

1,Jquery發送Post/Get請求,直接解析Json數據(json對象)
2,用eval解析json字符串對象

3,用JSON.parse 解析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字符串變為json對象的方法總結:
        眾所周知,在Js/Jquery中是可以使用json對象的,我們要想使用json對象,
        前提是要把接收到的json字符串轉為json對象哦。
        下面站長就為大家總結了Jquery解析json的常用方法,希望對大家有幫助

        本章方法講解:不明白的地方,加群@群主即可

        1,Jquery發送Post/Get請求,直接解析Json數據(json對象)
        2,用eval解析json字符串對象
        3,用JSON.parse 解析json對象

        */</script>
</head>
<body>
    <script type="text/javascript">
        //以下結果,請在console控制臺中查看(F12或者審查元素,即可進入Console控制臺)
        //第一種用法:Jquery接收Post/Get返回值,解析Json數據
        //($.post,$.get,$.getJSON,$.ajax等等 解析json的原理都一樣)
        $.post('你的URL', { action: 'GetList' }, function (data) {
            //此post請求為異步,上面是模擬的測試地址,正式使用時,請換成自己的接口地址
            //為了方便,在這里我就直接模擬出json對象數據,直接賦值咯(小盆友不要學我懶省事,哈哈)
            data = { "Name": "Json在線解析", "ProUrl": "www.yunjson.com", "SiteID": 1472222, "SiteLink": "官方QQ群:308250404", "SiteInfo": "Json在線工具(http://www.yunjson.com),Json學習資料專題模塊,只為你提供最好的Json學習資料,感謝你的支持" };
            if (data) {
                //接收數據成功,開始處理json對象(此時data就是接收到的json對象)
                //現在我們可以得到json數據中,我們需要的某些字段值了
                //為了方便查看,直接在控制臺中打印出來咯
                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調用Json數據");
        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對象,下面可直接調用
            console.log(jsoninfo);
            console.log("第二種用法:用eval解析json對象,結果值如下");
            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對象,下面可直接調用
            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對象方法總結大全