js怎么取本地json数据

JS怎么取本地JSON数据？3种常用方法详解（附代码示例）

在JavaScript开发中，读取本地JSON数据是一项非常常见的操作，无论是开发静态页面、原型验证，还是小型本地应用，都可能需要从本地JSON文件中读取数据，本文将详细介绍三种常用的方法来获取本地JSON数据,并附上清晰的代码示例和注意事项。

使用Fetch API（推荐，现代浏览器支持）

Fetch API是现代浏览器提供的强大功能，用于发起网络请求，同样也可以用于读取本地文件，这是目前最推荐的方式，语法简洁，基于Promise,易于处理异步操作。

适用场景：现代Web开发，支持ES6+的浏览器环境。

实现步骤：

确保你的JSON文件（例如data.json）和你的HTML/JS文件在同一个项目目录下（或知道其相对路径）。
使用fetch()函数请求该JSON文件。
使用.then()链式调用处理响应，首先调用response.json()将响应体解析为JSON对象。
最后在第二个.then()中获取并使用解析后的数据。

代码示例：

假设我们有一个data.json如下：

{
  "name": "张三",
  "age": 30,
  "city": "北京",
  "hobbies": ["阅读", "旅行", "编程"]
}

在HTML文件中,我们可以这样读取：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">Fetch读取本地JSON</title>
</head>
<body>
    <div id="result"></div>
    <script>
        // 使用fetch读取本地JSON文件
        fetch('data.json')
            .then(response => {
                // 检查响应是否成功
                if (!response.ok) {
                    throw new Error('网络响应不正常');
                }
                return response.json(); // 将响应体解析为JSON对象
            })
            .then(data => {
                // 在这里处理获取到的JSON数据
                console.log('成功读取JSON数据:', data);
                const resultDiv = document.getElementById('result');
                resultDiv.innerHTML = `
                    <h2>用户信息</h2>
                    <p>姓名: ${data.name}</p>
                    <p>年龄: ${data.age}</p>
                    <p>城市: ${data.city}</p>
                    <p>爱好: ${data.hobbies.join(', ')}</p>
                `;
            })
            .catch(error => {
                // 处理请求过程中可能出现的错误
                console.error('读取JSON数据时出错:', error);
                document.getElementById('result').innerHTML = `<p style="color: red;">加载失败: ${error.message}</p>`;
            });
    </script>
</body>
</html>

注意事项：

直接在浏览器中打开HTML文件（通过file://协议）时，fetch可能会因为浏览器的安全策略（CORS）而无法加载本地文件，建议通过本地服务器（如VS Code的Live Server插件、Python的http.server等）来运行HTML文件。
fetch返回的是Promise，需要用.then()或async/await处理。

使用XMLHttpRequest (XHR)

XMLHttpRequest是较老但广泛支持的API，用于在后台与服务器交换数据，虽然Fetch API更现代,但XHR在某些旧浏览器或特定场景下仍有使用价值。

适用场景：需要兼容非常老的浏览器,或有特殊需求的异步请求。

实现步骤：

创建一个XMLHttpRequest对象。
使用open()方法指定请求方法（GET）和URL（本地JSON文件路径）。
设置onload事件处理函数,当请求完成时触发。
在onload中，检查status，然后使用JSON.parse()解析响应文本。
设置onerror事件处理函数,捕获请求错误。
调用send()发送请求。

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">XHR读取本地JSON</title>
</head>
<body>
    <div id="result"></div>
    <script>
        // 创建XMLHttpRequest对象
        const xhr = new XMLHttpRequest();
        // 配置请求：GET请求，本地JSON文件
        xhr.open('GET', 'data.json', true);
        // 设置请求完成后的回调函数
        xhr.onload = function() {
            if (xhr.status >= 200 && xhr.status < 300) {
                // 请求成功，解析JSON数据
                try {
                    const data = JSON.parse(xhr.responseText);
                    console.log('成功读取JSON数据(XHR):', data);
                    const resultDiv = document.getElementById('result');
                    resultDiv.innerHTML = `
                        <h2>用户信息 (XHR)</h2>
                        <p>姓名: ${data.name}</p>
                        <p>年龄: ${data.age}</p>
                        <p>城市: ${data.city}</p>
                        <p>爱好: ${data.hobbies.join(', ')}</p>
                    `;
                } catch (e) {
                    console.error('解析JSON失败:', e);
                    document.getElementById('result').innerHTML = `<p style="color: red;">解析JSON失败</p>`;
                }
            } else {
                // 请求失败
                console.error('请求失败，状态码:', xhr.status);
                document.getElementById('result').innerHTML = `<p style="color: red;">请求失败，状态码: ${xhr.status}</p>`;
            }
        };
        // 设置请求失败时的回调函数
        xhr.onerror = function() {
            console.error('网络请求发生错误');
            document.getElementById('result').innerHTML = `<p style="color: red;">网络请求发生错误</p>`;
        };
        // 发送请求
        xhr.send();
    </script>
</body>
</html>

注意事项：

XHR是传统的异步请求方式,代码相对繁琐。
同样建议通过本地服务器运行，避免file://协议下的跨域问题。
需要手动处理状态码和JSON解析。

直接内联JSON数据（适用于小型/静态数据）

如果你的JSON数据量不大，且是静态不变的，最简单的方式就是直接将其作为JavaScript对象内联在代码中，或者通过<script>标签以JSONP的形式引入（虽然不常见，但可行）。

适用场景：小型、固定不变的数据，不想单独维护JSON文件,或作为配置项。

实现步骤：

将JSON数据直接赋值给一个JavaScript变量。
或者在HTML中使用<script>标签，并指定type="application/json",然后通过JavaScript获取该标签内容并解析。

代码示例（直接内联）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">内联JSON数据</title>
</head>
<body>
    <div id="result"></div>
    <script>
        // 直接将JSON数据定义为JavaScript对象
        const localData = {
            "name": "李四",
            "age": 25,
            "city": "上海",
            "hobbies": ["音乐", "电影", "游戏"]
        };
        // 直接使用数据
        console.log('直接使用内联数据:', localData);
        const resultDiv = document.getElementById('result');
        resultDiv.innerHTML = `
            <h2>用户信息 (内联)</h2>
            <p>姓名: ${localData.name}</p>
            <p>年龄: ${localData.age}</p>
            <p>城市: ${localData.city}</p>
            <p>爱好: ${localData.hobbies.join(', ')}</p>
        `;
        // 或者通过script标签获取（不常用，但可行）
        /*
        <script id="json-data" type="application/json">
            {
                "name": "王五",
                "age": 28,
                "city": "广州",
                "hobbies": ["运动", "摄影"]
            }
        </script>
        <script>
            const scriptElement = document.getElementById('json-data');
            const dataFromScript = JSON.parse(scriptElement.textContent);
            console.log('从script标签获取的数据:', dataFromScript);
        </script>
        */
    </script>
</body>
</html>

注意事项：

这种方法最简单，但不适合大型或需要频繁更新的数据，因为修改数据需要改动HTML/JS文件。
数据会随着页面加载而直接可用,无需异步请求。

总结与对比

方法	优点	缺点	适用场景
Fetch API	现代简洁，基于Promise，支持流式处理	旧浏览器不支持（可通过polyfill解决）	现代Web开发，推荐使用
XMLHttpRequest	兼容性好，功能强大	语法繁琐，基于回调	需要兼容旧浏览器，或有特殊异步需求
直接内联	最