$.getJSON()方法 - jQuery | 绿叶学习网

在jQuery中，我们可以使用$.getJSON()方法来通过Ajax获取服务器中JSON格式的数据。

语法：

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

说明：

.getJSON()是一个全局方法，所谓“全局方法”，指的是直接定义在jQuery对象（即“$”）下的方法。

参数url表示被加载的文件地址；参数data表示发送到服务器的数据，数据为“键值对”格式；参数fn表示请求成功后的回调函数，请求失败是不会处理的。

首先，我们在网站根目录下建立两个文件：一个是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>

默认情况下，预览效果如下图所示。

当我们点击按钮后，此时预览效果如下图所示。

分析：

$.each(data,function(index,info){
    str += "姓名：" + info["name"] +"<br/>";
    str += "性别：" + info["sex"] + "<br/>";
    str += "年龄：" + info["age"] + "<br/>";
    str += "<hr/>";
})

上面这段代码用于遍历JSON对象，JSON是一种数据格式，这个属于JavaScript的内容。如果小伙伴们不了解JSON的话，可以看一下绿叶学习网的JSON教程。

在上面这个例子中，在使用$.each()的时候要特别小心。由于该JSON本质上是一个数组，因此我们应该使用$.each()操作数组的方式，而不是操作对象的方法，这个可以参考“11.3 数组操作”这一节。