jQuery使用getJSON方法获取json数据完整示例

下面是关于"jQuery使用getJSON方法获取json数据完整示例"的完整攻略：

1. 简介

在Web开发中，经常需要使用Ajax技术从服务器获取数据并进行显示或其他操作。其中，获取的数据可能是JSON格式的数据，应对这种需求，jQuery提供了一个getJSON()方法来处理JSON数据。

2. getJSON()方法说明

方法语法

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

参数说明

url：必需，表示请求的服务器URL地址。该url可能包含查询字符串（也称为请求参数），用于告诉服务器需要哪些数据。
data：可选，用于发送请求的数据，格式为键值对（也称为请求参数）。数据格式可以是json字符串、javascript对象或数组。
callback：可选，用于请求成功后执行的回调函数。

方法返回值

无返回值。

3. 快速开始

示例1：获取JSON数据并统计数组中所有数字的和

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>getJSON示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#btn").click(function () {
                $.getJSON("data.json", function (data, status) {
                    if (status === "success") {
                        var sum = 0;
                        $.each(data.numbers, function (i, item) {
                            sum += item;
                        });
                        $("#result").text("数组元素总和为：" + sum);
                    } else {
                        alert("获取数据失败：" + status);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <p><button id="btn">获取JSON数据</button></p>
    <div id="result"></div>
</body>
</html>

数据文件data.json内容如下：

{
  "numbers": [1, 3, 5, 7, 9]
}

JS代码解析：
- 当页面加载完成后，通过jQuery $()函数将按钮的click事件绑定到获取JSON数据的处理程序中。
- 在click事件处理程序中，使用jQuery的 getJSON()方法获取JSON数据，并在请求返回时执行回调函数。
- 如果获取数据成功，就遍历获取到的数据的数组，累加所有元素的值。最后将结果显示在页面上。

示例2：向服务器提交数据并处理响应

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>getJSON示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#btn").click(function () {
                var nameVal = $("#name").val();
                var ageVal = $("#age").val();
                if (nameVal === "" || ageVal === "") {
                    alert("请输入姓名和年龄。");
                } else {
                    var data = {name: nameVal, age: ageVal};
                    $.getJSON("submit.php", data, function (response, status) {
                        if (status === "success") {
                            $("#result").text(response.msg);
                        } else {
                            alert("获取数据失败：" + status);
                        }
                    });
                }
            });
        });
    </script>
</head>
<body>
    <p>姓名：<input type="text" id="name"></p>
    <p>年龄：<input type="text" id="age"></p>
    <p><button id="btn">提交</button></p>
    <div id="result"></div>
</body>
</html>

PHP代码：

<?php
if (isset($_GET["name"]) && isset($_GET["age"])) {
    $name = $_GET["name"];
    $age = $_GET["age"];
    $result = array("code" => 200, "msg" => "您输入的姓名是：{$name}，年龄是：{$age}。");
} else {
    $result = array("code" => -1, "msg" => "参数错误！");
}
echo json_encode($result);
?>

JS代码解析：
- 当页面加载完成后，通过jQuery $()函数将按钮的click事件绑定到提交数据的处理程序中。
- 在click事件处理程序中，获取输入框中的数据，拼接为一个javascript对象，作为数据发送到服务器。
- 在getJson()方法中，第二个参数中传入Data对象，该对象将作为POST请求数据发送到服务器。
- 如果服务器返回成功，则用页面底部的div显示json数据。

PHP代码解析：
- 该文件接收一个name和age参数，用于返回提交的数据。
- 如果Get参数不正确，就返回一个错误提示。
- 如果Get参数正确，就返回提交的数据。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery使用getJSON方法获取json数据完整示例 - Python技术站