經過Jquery中Ajax獲取json文件數據

時間 2019-11-10

標籤經過 jquery ajax 獲取 json 文件數據欄目 JQuery 简体版

原文原文鏈接

1. JSON(JavaScript Object Notation): javaScript對象表示法；javascript

是存儲和交換文本信息的語法，比xml更小，更快，更易解析。html

2. JSON基本書寫格式：名稱/值對。例如： "Student":"Tom"java

Json值能夠是：jquery

數字（整數或浮點數）
字符串（在雙引號中）
邏輯值（true或者false）
數組（在方括號中）
對象（在花括號中）
null

例如（對象）：{"name":"tom","age":23} ajax

（數組）：json

1 {
2     "張三":[
3        {"姓":"張"},
4        {"名","三"}，
5        {"age",23}     
6      ]
7 }

注意： ① 寫JSON數組其實和java中String數組形式差很少，值得注意的是，JSON是名稱/值對的。數組

② 其中出現的字符串形式都是用雙引號，不能像js中雙引號單、引號都能用。瀏覽器

　　　 ③ 不管數組仍是對象，最後一個數值後面都不能有逗號，否則會出現問題。異步

通過個人在谷歌瀏覽器控制檯測試JSON數據，對於②和③他都不會報什麼錯誤，都能讀取出來，可是我經過jquery中ajax獲取JSON文件中數據時，會出現錯誤，具體緣由，暫時沒法解答。async

下面是在谷歌瀏覽器控制檯調試結果（注意都不符合上面的②和③）。

json數據的基本調用就如圖中所寫的,就是對數組和對象的調用。

3. 經過具體例子對Json文件的獲取。

建立一個.json文件。

  {    "list":[
                { "name":"c" , "url":"demo2.html"},
                { "name":"list22" , "url":"demo2.html"},
                { "name":"list33" , "url":"demo2.html"},
                { "name":"list44" , "url":"demo2.html"},
                { "name":"list55" , "url":"demo2.html"},
                { "name":"list66" , "url":"demo2.html"}
              ],
    
     "list1":[
                { "name":"我是第二個ul的1" , "url":"demo2.html"},
                { "name":"我是第二個ul的2" , "url":"demo2.html" },
                { "name":"我是第二個ul的3" , "url":"demo2.html" },
                { "name":"我是第二個ul的4" , "url":"demo2.html" },
                { "name":"我是第二個ul的5" , "url":"demo2.html"},
                { "name":"我是第二個ul的6" , "url":"demo2.html"} 
             ]
    
   }

在html中寫：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="jquery.js" type="text/javascript" charset="utf-8"></script>  //引入jquery庫
    </head>
    <body>
        <div class="div">
            <ul id="nav1" class="nav">   // 用於存放第一個ul數據的，裏面的li標籤即數據都是js生成的。
                <span style="color:red;">this is nav1</span>
            </ul>
            <ul id="nav2" class="nav">     //存放第二個ul數據
                <span style="color:red;">this is nav2</span>
            </ul>
        </div>
        <script type="text/javascript">
            $(function() {      // 頁面加載以後調用
                $.ajax({
                    type: "get",    //請求方式爲get，也能夠是設置爲post
                    url: "listData.json",     //所要獲取的json文件相對地址，注意不要寫錯了，我這裏放在同一個目錄下的
                    async: true,　　　　　　　　//是否爲異步請求，ture爲異步請求，false爲同步請求
                    success: function(d) {    //當請求以後調用。傳入返回後的數據，以及包含成功代碼的字符串

                        alert(d);    //這裏會彈出json文件中全部的字符串數據，如圖3-1
                        var d = eval("(" + d + ")");  // 將json字符串數據解析成對象
                        alert(d)     //彈出： 如圖3-2
                        var str = "<span style='color:red;'>this is nav1</span>";
                        var str1 = "<span style='color:red;'>this is nav2</span>";
                        var arr1 = d.list1;
                        var arr2 = d.list;
                        if (arr1 != null) {
                            for (var i = 0; i < arr1.length; i++) {  //這裏面都是建立li並賦值
                                str = str + "<li><a href='http://www.baidu.com'>" + arr1[i].name + "</a></li>";
                            }
                            $("#nav1").html(str);
                        }
                        if (arr2 != null) {
                            for (var j = 0; j < arr2.length; j++) {
                                str1 += "<li><a href='" + arr2[j].url + "'>" + arr2[j].name + "</a></li>";
                            }
                            $("#nav2").html(str1);
                        }
                    }
                });
            });
        </script>
    </body>
</html>

視圖：

　　　　　　　　　　圖3-1

圖3-2

最後的效果以下圖：

氣質ul列表也能夠根據Css其餘樣式去設置，達到更美觀的效果。