如何请求本地的json文件

在编写网页或应用程序时，我们常常需要请求本地的JSON文件来获取数据，JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于阅读和编写，同时也易于机器解析和生成，如何请求本地的JSON文件呢？下面我将详细介绍请求本地JSON文件的方法。

我们需要准备一个本地的JSON文件，创建一个名为data.json的文件,内容如下：

{
  "name": "张三",
  "age": 25,
  "gender": "男"
}

我们将通过JavaScript代码来请求这个本地JSON文件，这里主要介绍两种方法：使用XMLHttpRequest对象和使用Fetch API。

使用XMLHttpRequest对象

XMLHttpRequest对象是JavaScript中用于与服务器交互的内置对象,以下是一个使用XMLHttpRequest请求本地JSON文件的示例：

创建一个HTML文件，例如index.html。
在index.html中,编写以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>请求本地JSON文件</title>
</head>
<body>
    <script>
        // 创建XMLHttpRequest对象
        var xhr = new XMLHttpRequest();
        // 配置请求类型、文件路径和异步处理方式
        xhr.open('GET', 'data.json', true);
        // 设置请求完成后的回调函数
        xhr.onload = function() {
            if (xhr.status == 200) {
                // 解析JSON字符串为JavaScript对象
                var data = JSON.parse(xhr.responseText);
                // 在控制台输出结果
                console.log(data);
            } else {
                console.log('请求失败');
            }
        }
        // 发送请求
        xhr.send();
    </script>
</body>
</html>

使用Fetch API

Fetch API是现代浏览器提供的一种更简单、更强大的网络请求接口，以下是使用Fetch API请求本地JSON文件的示例：

创建同样的HTML文件,然后在其中编写以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>请求本地JSON文件</title>
</head>
<body>
    <script>
        // 使用Fetch API请求本地JSON文件
        fetch('data.json')
            .then(response => {
                // 检查响应状态
                if (response.ok) {
                    return response.json();
                } else {
                    throw new Error('请求失败');
                }
            })
            .then(data => {
                // 在控制台输出结果
                console.log(data);
            })
            .catch(error => {
                console.log(error);
            });
    </script>
</body>
</html>

在使用以上两种方法时，需要注意的是，由于浏览器的同源策略，直接在浏览器中请求本地文件可能会受到限制，为了避免这个问题,你可以使用以下两种解决方案：