js中如何链接json文件

JavaScript 中如何加载和使用 JSON 文件

在现代 Web 开发中，JSON（JavaScript Object Notation）因其轻量级、易读、易于解析的特性，已成为数据交换的事实标准，无论是从服务器获取 API 数据，还是在前端项目中加载静态配置信息，我们经常需要将 JSON 文件中的数据读取到 JavaScript 中使用，本文将详细介绍几种在 JavaScript 中链接和加载 JSON 文件的常用方法,并分析它们的适用场景。

使用 `fetch()` API（推荐用于网络请求）

fetch() 是现代浏览器和 Node.js 环境中提供的一个强大而简洁的 API，用于异步获取网络资源，当你的 JSON 文件托管在 Web 服务器上时,这是最推荐的方法。

工作原理： fetch() 返回一个 Promise 对象，当请求成功时，我们需要调用 .json() 方法来解析响应体，这个方法同样返回一个 Promise，最终解析为 JavaScript 对象或数组。

示例代码：

假设你有一个名为 data.json 的文件,内容如下：

{
  "name": "张三",
  "age": 30,
  "skills": ["JavaScript", "React", "Node.js"],
  "isStudent": false
}

HTML 文件 (index.html):

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">Fetch JSON 示例</title>
</head>
<body>
    <h1>用户信息</h1>
    <div id="user-info"></div>
    <script src="app.js"></script>
</body>
</html>

JavaScript 文件 (app.js):

// 使用 fetch API 获取 JSON 文件
fetch('data.json')
  .then(response => {
    // 检查请求是否成功
    if (!response.ok) {
      throw new Error('网络响应不正常');
    }
    // 将响应体解析为 JSON
    return response.json();
  })
  .then(data => {
    // 在这里处理解析后的 JavaScript 对象
    console.log('成功加载数据:', data);
    // 将数据渲染到页面上
    const userInfoDiv = document.getElementById('user-info');
    userInfoDiv.innerHTML = `
      <p><strong>姓名:</strong> ${data.name}</p>
      <p><strong>年龄:</strong> ${data.age}</p>
      <p><strong>技能:</strong> ${data.skills.join(', ')}</p>
      <p><strong>是否为学生:</strong> ${data.isStudent ? '是' : '否'}</p>
    `;
  })
  .catch(error => {
    // 捕获并处理任何错误
    console.error('加载数据时出错:', error);
  });

优点：

现代标准，Promise 基础,语法简洁。
功能强大，不仅可以获取文本，还可以处理图片、视频等多种资源。
提供了对请求和响应的细粒度控制（如设置请求头、方法等）。

缺点：

由于浏览器的同源策略，如果直接在本地打开 HTML 文件（file:// 协议），fetch() 请求本地 JSON 文件会因 CORS 策略而失败，需要在 Web 服务器环境下运行。

使用 `XMLHttpRequest`（传统方法）

XMLHttpRequest (XHR) 是 fetch() 出现之前用于在后台与服务器交换数据的标准方法，虽然较旧，但在所有浏览器中都有良好的支持,并且在一些旧项目或需要兼容旧浏览器时仍在使用。

工作原理： 创建一个 XHR 对象，配置请求，然后发送，通过监听 onreadystatechange 或 onload 事件来处理响应。

示例代码 (app.js):

const xhr = new XMLHttpRequest();
// 配置请求：GET 方法，异步请求
xhr.open('GET', 'data.json', true);
// 设置响应类型为 JSON，这样 responseText 会自动解析
xhr.responseType = 'json';
// 当请求完成时触发
xhr.onload = function() {
  if (xhr.status === 200) {
    // xhr.response 已经是解析好的 JavaScript 对象
    const data = xhr.response;
    console.log('成功加载数据:', data);
    // 渲染数据...
    const userInfoDiv = document.getElementById('user-info');
    userInfoDiv.innerHTML = `
      <p><strong>姓名:</strong> ${data.name}</p>
      <p><strong>年龄:</strong> ${data.age}</p>
    `;
  } else {
    console.error('请求失败，状态码:', xhr.status);
  }
};
// 处理网络错误
xhr.onerror = function() {
  console.error('网络请求发生错误');
};
// 发送请求
xhr.send();

优点：

兼容性极好,支持非常古老的浏览器。
可以通过 xhr.upload 上传文件,功能全面。

缺点：

API 相对繁琐,需要手动处理事件和状态码。
基于回调，容易导致“回调地狱”，不如 Promise 链式调用清晰。

直接导入（适用于模块化环境）

如果你使用的是像 Webpack、Vite 或 Rollup 这样的现代前端构建工具，并且你的项目是基于 ES Modules (ESM) 的，你可以像导入 JavaScript 模块一样直接导入 JSON 文件。

工作原理： 构建工具会自动将 JSON 文件解析为 JavaScript 对象，并将其作为模块的 default 导出内容。

示例代码 (app.js):

// 使用 ESM import 语法直接导入 JSON 文件
import userConfig from './data.json';
// userConfig 就是一个 JavaScript 对象，可以直接使用
console.log('直接导入的数据:', userConfig);
// 渲染数据...
const userInfoDiv = document.getElementById('user-info');
userInfoDiv.innerHTML = `
  <p><strong>姓名:</strong> ${userConfig.name}</p>
  <p><strong>年龄:</strong> ${userConfig.age}</p>
  <p><strong>技能:</strong> ${userConfig.skills.join(', ')}</p>
`;

配置： 在某些构建工具中（如旧版的 Webpack），可能需要在配置文件中启用 JSON 解析器。在 webpack.config.js 中：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.json$/,
        type: 'json',
      },
    ],
  },
};

注意： 新版本的 Webpack 和 Vite 通常开箱即用地支持此功能。

优点：

语法最简洁直观,就像使用本地变量一样。
代码可读性高,易于维护。
在构建时处理，无需运行时网络请求,加载速度更快。

缺点：

仅适用于模块化构建环境，不能在纯浏览器环境（直接打开 HTML 文件）中使用。
会将 JSON 文件打包进最终的 JavaScript 包中,可能导致主包体积增大。

使用 `<script>` 标签（适用于旧项目或非模块化场景）

在模块化系统普及之前，一种常见的技巧是利用 <script> 标签可以加载任何文本文件（包括 JSON）的特性来获取数据。

工作原理： 创建一个 <script> 标签，将其 src 指向你的 JSON 文件,你可以在一个全局回调函数中处理这个数据。

步骤：

创建回调函数： 在 app.js 中定义一个全局函数。

function handleUserData(data) {
  console.log('通过 script 标签加载数据:', data);
  // 在这里处理数据...
}

修改 JSON 文件： 将 data.json 的内容包装成一个函数调用。

handleUserData({
  "name": "李四",
  "age": 25,
  "skills": ["Vue.js", "CSS"],
  "isStudent": true
});

在 HTML 中动态加载脚本：

<script>
  // 动态创建 script 标签来加载 JSON
  const script = document.createElement('script');
  script.src = 'data.json';
  document.body.appendChild(script);
</script>

优点：

兼容性非常好,即使在非常旧的浏览器中也能工作。
可以绕过浏览器的 CORS 限制。

缺点：

非常不安全！ 这会带来严重的安全风险（XSS 攻击），因为任何能访问到该 JSON 文件 URL 的人都可以向其注入恶意 JavaScript 代码。
需要修改 JSON 文件本身，不符合 RESTful 设计原则。
污染全局作用域。

总结与选择建议

方法	适用场景	优点	缺点
`fetch()` API	**Web

正文

js中如何链接json文件

JavaScript 中如何加载和使用 JSON 文件

使用 `fetch()` API（推荐用于网络请求）

使用 `XMLHttpRequest`（传统方法）

直接导入（适用于模块化环境）

使用 `<script>` 标签（适用于旧项目或非模块化场景）

总结与选择建议

相关阅读

php下载生成json文件怎么打开

网络上下载的json怎么运行

jmeter怎么请求json报文

json如何变成excel

发表评论取消回复

还没有评论，来说两句吧...

目录[+]

JavaScript 中如何加载和使用 JSON 文件

使用 fetch() API（推荐用于网络请求）

使用 XMLHttpRequest（传统方法）

直接导入（适用于模块化环境）

使用 <script> 标签（适用于旧项目或非模块化场景）

总结与选择建议

相关阅读

php下载生成json文件怎么打开

网络上下载的json怎么运行

jmeter怎么请求json报文

json如何变成excel

发表评论取消回复

还没有评论，来说两句吧...

目录[+]

使用 `fetch()` API（推荐用于网络请求）

使用 `XMLHttpRequest`（传统方法）

使用 `<script>` 标签（适用于旧项目或非模块化场景）