JQuery中getJSON的使用方法

针对“JQuery中getJSON的使用方法”的完整攻略，以下是详细讲解。

什么是getJSON

在开始讲解使用方法之前，需要先了解一下getJSON。getJSON是JQuery中常用的一种基于AJAX的请求方式，用于获取JSON格式的数据。

getJSON的语法

$.getJSON(url,[data],[callback])

参数解释：

url：必须参数，请求的url地址；
data：可选参数，发送到服务器端的数据，可以是Key/Value形式的对象，也可以是序列化的字符串；
callback：可选参数，请求成功后的回调函数，可以是普通函数或者匿名函数；

其中，data和callback都是可选参数，如果没有需要传入的数据和回调函数，则可以省略。

getJSON的使用示例1

通过下面的示例，来了解一下如何使用getJSON获取返回的JSON格式数据，示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>getJSON请求示例</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <div id="content"></div>
    <script>
        $.getJSON("data.json",function(data){
            var html = "";
            $.each(data,function(index,item){
                html += "<p>" + item.name + "</p>";
            });
            $("#content").html(html);
        });
    </script>
</body>
</html>

上述代码中，我们以data.json文件作为数据源，通过getJSON请求获取到JSON格式的数据，然后将数据循环输出到页面中。

data.json中的内容如下：

[
    {"name":"Tom","age":32,"sex":"男"},
    {"name":"Lucy","age":24,"sex":"女"},
    {"name":"Tina","age":28,"sex":"女"}
]

getJSON的使用示例2

加入了请求头信息，示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>getJSON请求示例</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <div id="content"></div>
    <script>
        $.getJSON("data.json", {"access_token":"xxxxxxx"}, function(data){
            var html = "";
            $.each(data,function(index,item){
                html += "<p>" + item.name + "</p>";
            });
            $("#content").html(html);
        });
    </script>
</body>
</html>

在上述代码中，新增了一个参数“access_token”，它的值是“xxxxxxx”，这样在请求时就会带上这个参数，方便服务器进行验证并返回对应的处理结果。

总结

通过以上的讲解，您应该掌握了getJSON的使用方法，包括了语法和多条示例，希望对您有帮助！

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JQuery中getJSON的使用方法 - Python技术站