jQuery $.getJSON()方法的用法

在 jQuery 中，我們可以使用 $.getJSON() 方法通過 Ajax 請求獲取伺服器中 JSON 格式的資料。

語法：

$.getJSON(url ,data, function(data){
……
})

$.getJSON() 是一個全域性方法，所謂“全域性方法”，指的是直接定義在 jQuery 物件（即$）下的方法。引數 url 表示被載入的檔案地址；引數 data 表示傳送到伺服器的資料，資料為“鍵值對”格式；引數 function(data){} 表示請求成功後的回撥函數，請求失敗是不會處理的。

首先，我們在網站根目錄下建立兩個檔案：一個是 info.json 檔案，另一個是 getJSON.html 檔案。

其中 info.json 檔案內容如下。

[
  {
    "name":"小傑",
    "sex":"男",
    "age": 24
  },
  {
    "name":"小明",
    "sex":"男",
    "age": 24
  },
  {
    "name":"小紅",
    "sex":"女",
    "age": 23
  }
]

舉例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            $("#btn").click(function(){
                $.getJSON("info.json", function (data) {
                    //定義一個變數，用於儲存結果
                    var str="";
                    $.each(data,function(index,info){
                        str += "姓名：" + info["name"] +"<br/>";
                        str += "性別：" + info["sex"] + "<br/>";
                        str += "年齡：" + info["age"] + "<br/>";
                        str += "<hr/>";
                    })
                    //插入資料
                    $("div").html(str);
                })
            })
        })
    </script>
</head>
<body>
    <input id="btn" type="button" value="獲取資料" />
    <div></div>
</body>
</html>

預設情況下，預覽效果如圖 1 所示。

圖 1：預設效果