jQuery+ajax中getJSON() 用法实例

下面是一份关于“jQuery+ajax中getJSON() 用法实例”的完整攻略。

什么是jQuery getJSON()方法？

jQuery.getJSON()是用于发送GET请求并从服务器获取数据的函数。在获取数据后，它使用JSON.parse()解析JSON响应。

函数语法如下：

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

其中：

url为必需，指定发送请求的URL地址；
data为可选，对象或字符串，发送到服务器的数据；
success为可选，指定数据获取成功后的回调函数，接收从服务器返回的JSON数据。

两条示例说明

示例一：从服务器获取JSON数据

以下代码演示从服务器获取JSON数据并将其追加到HTML中：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery getJSON()实例示例</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
    $(document).ready(function(){
       $.getJSON("data.json", function(data){  // 从服务器获取data.json文件
           $.each(data, function(key, value){  // 遍历JSON数据
               $("ul").append("<li>"+value+"</li>");  
           });
       });
    });
    </script>
</head>
<body>
    <ul></ul>
</body>
</html>

在上述示例中，我们通过getJSON()的方法从服务器获取名为"data.json"的JSON文件，并进行遍历赋值到HTML中，代码中对获得的数据进行了迭代操作，再将其插入到ul标签中。

示例二：向服务器发送数据并获取JSON数据

以下代码演示如何向服务器发送数据并获取相应的JSON数据：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery getJSON()实例示例</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
    $(document).ready(function(){
        $("button").click(function(){
            $.getJSON("test.php", {name:"admin",pass:"123456"}, function(data){ // 向服务器发送名字和密码
                $.each(data, function(key, value){  // 迭代JSON数据
                    $("p").append(key+" : "+value+"<br/>"); // 输出key和value
                });
            });
        });
    });
    </script>
</head>
<body>
    <button>发送数据</button>
    <p></p>
</body>
</html>

在上述示例中，我们通过getJSON()方法向服务器发送请求，并通过发送对象中的name和pass两个参数传递相应数据。传递成功后，服务器返回的JSON数据进行了迭代操作，再将其插入到p标签中显示出来。

总结

以上就是“jQuery+ajax中getJSON() 用法实例”的详细攻略。通过上述示例代码，你可以成功从服务器获取或发送数据。当然，这只是getJSON()在使用中的两个典型场景，你在使用时，也可以结合不同的业务需求进行变更和修改。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery+ajax中getJSON() 用法实例 - Python技术站

jQuery+ajax中getJSON() 用法实例

什么是jQuery getJSON()方法？

两条示例说明

示例一：从服务器获取JSON数据

示例二：向服务器发送数据并获取JSON数据

总结

相关文章