JavaScript 引入 JSON 数据的多种方法详解
在现代 Web 开发中,JSON(JavaScript Object Notation)因其轻量级、易于阅读和解析的特性,已成为数据交换的事实标准,无论是从服务器获取 API 响应,还是在前端项目中配置数据,我们都不可避免地需要将 JSON 数据引入到 JavaScript 中,本文将详细介绍几种在 JavaScript 中引入 JSON 数据的常用方法,并分析它们的适用场景。
直接内联 JSON(最简单直接)
这是最基础、最直观的方法,适用于数据量小且固定的场景,例如页面初始化配置、简单的选项列表等。
实现方式:
你可以在一个 <script> 标签中直接编写 JSON 数据,但关键在于,必须将 type 属性设置为 application/json,这告诉浏览器,这个脚本块不是要执行的 JavaScript 代码,而是 JSON 数据。
示例代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">内联 JSON 示例</title>
</head>
<body>
<h1>用户列表</h1>
<ul id="user-list"></ul>
<!-- 方式一:内联 JSON -->
<script type="application/json" id="user-data">
{
"users": [
{ "id": 1, "name": "张三", "email": "zhangsan@example.com" },
{ "id": 2, "name": "李四", "email": "lisi@example.com" },
{ "id": 3, "name": "王五", "email": "wangwu@example.com" }
]
}
</script>
<script>
// 获取 JSON 字符串
const jsonString = document.getElementById('user-data').textContent;
// 解析为 JavaScript 对象
const userData = JSON.parse(jsonString);
// 使用数据
const userListElement = document.getElementById('user-list');
userData.users.forEach(user => {
const listItem = document.createElement('li');
listItem.textContent = `${user.name} (${user.email})`;
userListElement.appendChild(listItem);
});
</script>
</body>
</html>
优点:
- 简单,无需额外请求。
- 数据与 HTML 文件在一起,便于调试。
缺点:
- 不适合大量数据,会使 HTML 文件臃肿。
- 数据更新时需要修改 HTML 文件。
从外部 .json 文件引入
当数据量较大或需要被多个页面共享时,最佳实践是将 JSON 数据保存在一个单独的 .json 文件中,然后通过 JavaScript 的 Fetch API 或 XMLHttpRequest 来异步加载。
实现方式:
- 创建一个 JSON 文件(
data.json)。 - 在 JavaScript 中使用 Fetch API 请求该文件,并用
.json()方法解析响应。
示例代码:
data.json 文件内容:
{: "产品列表",
"products": [
{ "id": "p01", "name": "笔记本电脑", "price": 5999 },
{ "id": "p02", "name": "无线鼠标", "price": 99 },
{ "id": "p03", "name": "机械键盘", "price": 399 }
]
}
HTML 文件中的 JavaScript 代码:
<script>
async function loadProductData() {
try {
// 使用 Fetch API 请求 JSON 文件
const response = await fetch('data.json');
// 检查请求是否成功
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
// 将响应体解析为 JSON 对象
const productData = await response.json();
// 使用数据
console.log(productData);
// 将产品名称打印到控制台
productData.products.forEach(product => {
console.log(`产品: ${product.name}, 价格: ¥${product.price}`);
});
} catch (error) {
console.error("无法加载产品数据:", error);
}
}
// 调用函数加载数据
loadProductData();
</script>
优点:
- 实现了数据与逻辑的分离,便于维护。
- 可被多个页面或应用复用。
- 服务器可以缓存此文件,提高性能。
缺点:
- 由于浏览器的同源策略,直接通过
file://协议打开 HTML 文件会因 CORS(跨域资源共享)策略而失败,需要在本地 Web 服务器(如 VS Code 的 Live Server 插件)环境下运行。
通过 AJAX 请求(服务器端数据)
这是最常见的方式,用于从后端 API 动态获取数据,服务器可以根据请求返回不同的 JSON 数据,实现了前后端真正的分离。
实现方式:
与从外部文件加载类似,但请求的 URL 是一个服务器端 API 接口(/api/users),同样推荐使用现代的 Fetch API。
示例代码:
假设你有一个运行在 https://api.example.com 的后端服务。
async function fetchUserData() {
const apiUrl = 'https://api.example.com/users';
try {
const response = await fetch(apiUrl);
if (!response.ok) {
throw new Error(`网络响应不正常: ${response.statusText}`);
}
const users = await response.json();
// 处理获取到的用户数据
console.log('成功获取用户数据:', users);
// ... 在这里更新你的页面 DOM ...
} catch (error) {
console.error('获取用户数据时出错:', error);
}
}
fetchUserData();
优点:
- 数据是动态的,可以实时反映服务器端的变化。
- 完全解耦了前端和后端,是现代 Web 应用的核心模式。
缺点:
- 依赖网络连接,有延迟和失败的风险。
- 需要处理跨域问题,后端必须配置正确的 CORS 头。
将 JSON 作为模块引入(ES Modules)
如果你正在使用现代前端构建工具(如 Vite, Webpack)或浏览器原生支持 ES Modules,可以将 JSON 文件作为模块直接导入,这是模块化项目中非常优雅的一种方式。
实现方式:
在 <script> 标签中设置 type="module",然后使用 import 语句。
示例代码:
config.json 文件内容:
{
"appName": "我的应用",
"version": "1.0.0",
"apiEndpoint": "https://api.myapp.com"
}
main.js 文件内容:
// 直接导入 JSON 文件,它会自动被解析为 JavaScript 对象
import config from './config.json';
console.log('应用名称:', config.appName);
console.log('API 端点:', config.apiEndpoint);
// ... 使用 config 对象 ...
HTML 文件中引入模块:
<script type="module" src="main.js"></script>
优点:
- 代码结构清晰,符合模块化思想。
- 构建工具(如 Vite)可以对其进行 tree-shaking(摇树优化),只打包用到的部分。
- 开发体验好,有代码提示和类型检查(配合 TypeScript)。
缺点:
- 依赖于 ES Modules 环境,在旧版浏览器中需要转译(Babel)或打包(Webpack)。
- 不适合加载动态或用户请求的 JSON 数据,主要用于静态配置。
总结与对比
| 方法 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|
| 内联 JSON | 小型、静态、页面级配置 | 简单直接,无需请求 | 数据与 HTML 耦合,不易维护 |
外部 .json 文件 |
中大型、可共享的静态数据 | 数据与逻辑分离,可复用 | 需 Web 服务器环境,有 CORS 限制 |
| AJAX 请求 API | 动态、实时、从后端获取的数据 | 完全解耦,数据实时性强 | 依赖网络,需处理异步和错误 |
| ES 模块引入 | 现代模块化项目中的静态配置 | 结构优雅,支持 tree-shaking | 依赖 ES Modules 环境 |
如何选择?
- 如果只是几行配置数据,用方法一(内联)最快。
- 如果是一些静态的、项目共用的数据(如城市列表、产品目录),用方法二(外部文件)或方法四(ES 模块),ES 模块是更现代的选择。
- 如果数据来自数据库,需要根据用户操作实时更新,毫无疑问使用**方法三(AJAX 请求



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