jQuery读取本地的json文件(实例讲解)

下面我来为你详细讲解如何使用 jQuery 读取本地的 JSON 文件。

一、阅读本地 JSON 文件

我们可以使用 jQuery 的 $.getJSON() 方法来读取本地的 JSON 文件。

1.1 准备 JSON 文件

首先，我们需要准备一个本地的 JSON 文件，可以参考以下格式：

[
    {
        "name": "张三",
        "age": 20,
        "gender": "男"
    },
    {
        "name": "李四",
        "age": 25,
        "gender": "女"
    }
]

1.2 使用 $.getJSON() 方法读取 JSON 文件

接着，在 HTML 页面中引入 jQuery 库，并使用 $.getJSON() 方法读取 JSON 文件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>读取本地 JSON 文件示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(function () {
            $.getJSON('data.json', function (data) {
                console.log(data);
            });
        });
    </script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

上述代码中，$.getJSON() 方法接收两个参数：

第一个参数为要读取的 JSON 文件路径，此处为 'data.json'；
第二个参数为读取成功后的回调函数，此处使用 console.log() 方法将读取到的数据输出到浏览器的控制台中。

当页面加载完成后，会自动读取本地的 data.json 文件，并将读取到的数据输出到控制台。

1.3 完整示例代码

下面是一个完整的读取本地 JSON 文件的示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>读取本地 JSON 文件示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(function () {
            $.getJSON('data.json', function (data) {
                console.log(data);
            });
        });
    </script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

二、通过 Ajax 请求本地 JSON 文件

除了使用 $.getJSON() 方法读取本地的 JSON 文件外，还可以通过 Ajax 请求本地的 JSON 文件，具体方式为使用 $.ajax() 方法。

2.1 准备 JSON 文件

同样需要先准备一个本地的 JSON 文件。

2.2 使用 $.ajax() 方法请求 JSON 文件

然后，在 HTML 页面中引入 jQuery 库，并使用 $.ajax() 方法请求 JSON 文件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>请求本地 JSON 文件示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(function () {
            $.ajax({
                url: 'data.json',
                type: 'GET',
                dataType: 'json',
                success: function (data) {
                    console.log(data);
                },
                error: function (xhr, status, error) {
                    console.log('请求失败');
                }
            });
        });
    </script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

上述代码中，$.ajax() 方法接收一个对象作为参数，其中包含以下属性：

url：要请求的本地 JSON 文件路径；
type：请求类型，可以为 'GET' 或 'POST'；
dataType：预期服务器返回的数据类型，此处为 'json'；
success：请求成功后的回调函数，此处使用 console.log() 方法将读取到的数据输出到浏览器的控制台中；
error：请求失败后的回调函数，此处使用 console.log() 方法输出请求失败的信息。

当页面加载完成后，会自动发送 Ajax 请求，请求成功后将读取到的数据输出到控制台。

2.3 完整示例代码

下面是一个完整的通过 Ajax 请求本地 JSON 文件的示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>请求本地 JSON 文件示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(function () {
            $.ajax({
                url: 'data.json',
                type: 'GET',
                dataType: 'json',
                success: function (data) {
                    console.log(data);
                },
                error: function (xhr, status, error) {
                    console.log('请求失败');
                }
            });
        });
    </script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

希望以上内容对你有所帮助！

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery读取本地的json文件(实例讲解) - Python技术站