json怎么引入html数据

JSON与HTML的完美邂逅：详解如何在HTML中引入和使用JSON数据

在现代的网页开发中，我们常常需要处理动态数据，这些数据可能来自服务器、用户输入，或者是一个本地的配置文件，JSON（JavaScript Object Notation）以其轻量、易读和易于解析的特性，成为了Web数据交换的事实标准，我们究竟该如何将JSON数据引入到HTML页面中，并让它“活”起来呢？

本文将带你从零开始,系统地学习在HTML中引入和使用JSON数据的多种方法。

为什么要在HTML中使用JSON？

在技术细节之前,我们先理解一下为什么JSON如此重要：

结构化数据：JSON可以清晰地表示复杂的数据结构，如对象（有属性和值的集合）和数组（有序的值列表）。
轻量高效：相比于XML，JSON的语法更简洁，文件体积更小,传输速度更快。
JavaScript原生支持：JSON是JavaScript的一个子集，浏览器内置了JSON.parse()和JSON.stringify()方法,使得解析和生成JSON数据变得异常简单。
前后端分离：在前后端分离的架构中，后端API通常返回JSON格式的数据,前端JavaScript负责接收并动态渲染到HTML页面上。

方法一：通过JavaScript在页面中直接引入（最常用）

这是最核心、最常见的方法，其基本流程是：获取JSON数据 -> 解析数据 -> 使用JavaScript操作DOM，将数据渲染到HTML中。

步骤1：准备JSON数据

JSON数据可以来自多个地方,我们先从一个简单的本地JSON对象开始。

假设我们有一个学生列表的数据：

[
  {
    "id": 1,
    "name": "张三",
    "age": 20,
    "major": "计算机科学"
  },
  {
    "id": 2,
    "name": "李四",
    "age": 21,
    "major": "数据科学"
  },
  {
    "id": 3,
    "name": "王五",
    "age": 19,
    "major": "软件工程"
  }
]

步骤2：在HTML中预留数据容器

我们需要在HTML中创建一些元素，作为JavaScript渲染数据的“目标”。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">JSON数据渲染示例</title>
    <style>
        body { font-family: sans-serif; }
        table { width: 100%; border-collapse: collapse; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
    </style>
</head>
<body>
    <h1>学生信息列表</h1>
    <!-- 数据将在这里被动态渲染 -->
    <table id="student-table">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>专业</th>
            </tr>
        </thead>
        <tbody id="student-list">
            <!-- 动态生成的行将插入这里 -->
        </tbody>
    </table>
    <!-- 引入我们的JavaScript文件 -->
    <script src="app.js"></script>
</body>
</html>

步骤3：使用JavaScript解析并渲染数据

创建一个app.js文件,编写代码来处理数据。

// 1. 定义JSON数据（在实际应用中，这可能来自API或文件）
const studentsData = [
  { "id": 1, "name": "张三", "age": 20, "major": "计算机科学" },
  { "id": 2, "name": "李四", "age": 21, "major": "数据科学" },
  { "id": 3, "name": "王五", "age": 19, "major": "软件工程" }
];
// 2. 获取HTML中的容器元素
const studentListBody = document.getElementById('student-list');
// 3. 遍历JSON数据，为每个学生创建一个表格行
studentsData.forEach(student => {
    // 创建一个新的 <tr> 元素
    const row = document.createElement('tr');
    // 为每个数据点创建一个 <td> 元素并填充内容
    row.innerHTML = `
        <td>${student.id}</td>
        <td>${student.name}</td>
        <td>${student.age}</td>
        <td>${student.major}</td>
    `;
    // 将新创建的行添加到表格的tbody中
    studentListBody.appendChild(row);
});

工作原理：

我们定义了一个JavaScript变量studentsData，它的值就是一个JSON数组，因为它是有效的JavaScript语法,所以可以直接使用。
document.getElementById('student-list')找到了HTML中id为student-list的<tbody>元素。
forEach方法遍历studentsData数组中的每一个学生对象。
在循环内部，我们为每个学生创建一个<tr>（表格行）元素。
使用模板字符串（反引号 `）方便地构建了<tr>内部的<td>（表格单元格）内容，并通过student.name等方式访问JSON对象的属性。
appendChild()方法将创建好的行动态地添加到表格中。

当你在浏览器中打开这个HTML文件时，你会看到一个由JavaScript动态生成的、格式整齐的学生信息表。

方法二：通过`<script>`标签引入外部JSON文件

有时，JSON数据量很大或者需要被多个页面共享，我们会将其保存在一个单独的.json文件中。

步骤1：创建外部JSON文件

创建一个名为data.json的文件,内容如下：

// data.json
[
  { "id": 101, "product": "笔记本电脑", "price": 5999 },
  { "id": 102, "product": "无线鼠标", "price": 99 },
  { "id": 103, "product": "机械键盘", "price": 499 }
]

步骤2：使用JavaScript的Fetch API获取文件

你不能直接像引入CSS或JS文件那样用<script src="data.json"></script>来引入JSON，因为浏览器会将其当作JavaScript代码来执行，从而导致错误，正确的方法是使用fetch()函数。

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">Fetch JSON示例</title>
</head>
<body>
    <h1>产品列表</h1>
    <ul id="product-list"></ul>
    <script>
        // 使用 fetch API 获取外部JSON文件
        fetch('data.json')
            .then(response => {
                // 检查请求是否成功
                if (!response.ok) {
                    throw new Error('网络响应不正常');
                }
                // 将响应体解析为JSON格式
                return response.json();
            })
            .then(data => {
                // data 现在是一个JavaScript数组或对象
                const productList = document.getElementById('product-list');
                data.forEach(product => {
                    const listItem = document.createElement('li');
                    listItem.textContent = `ID: ${product.id}, 产品: ${product.product}, 价格: ¥${product.price}`;
                    productList.appendChild(listItem);
                });
            })
            .catch(error => {
                // 处理请求过程中可能出现的错误
                console.error('获取JSON数据时出错:', error);
            });
    </script>
</body>
</html>

工作原理：

fetch('data.json')向服务器发起一个请求，获取data.json文件。
第一个.then()接收一个Response对象。response.json()是一个异步方法，它读取响应体并将其解析为Promise,该Promise解析为JSON对象。
第二个.then()接收解析后的JavaScript数据（在这里是产品数组）。
之后，我们使用与方法一相同的方式遍历数据，并用<li>元素将其渲染到HTML的无序列表中。
.catch()用于捕获网络错误或JSON解析错误。

方法	适用场景	优点	缺点
直接内联在JS中	数据量小、固定，或作为示例演示。	简单直接，无需额外请求。	数据与逻辑耦合，不易维护，无法动态更新。
Fetch API加载外部文件	数据量大、需要共享、或来自后端API。	数据与逻辑分离，便于维护和更新，是现代Web应用的标准做法。	需要处理异步操作（`.then`/`async await`），存在跨域问题（需后端配置）。

**在HTML中引入JSON数据，本质上是通过

正文

json怎么引入html数据

JSON与HTML的完美邂逅：详解如何在HTML中引入和使用JSON数据

为什么要在HTML中使用JSON？

方法一：通过JavaScript在页面中直接引入（最常用）

步骤1：准备JSON数据

步骤2：在HTML中预留数据容器

步骤3：使用JavaScript解析并渲染数据

方法二：通过`<script>`标签引入外部JSON文件

步骤1：创建外部JSON文件

步骤2：使用JavaScript的Fetch API获取文件

相关阅读

后端怎么返回json类型的数据库

jsp怎么取json

java怎么转json中的中文

json可以处理什么样的数据库

发表评论取消回复

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

目录[+]

JSON与HTML的完美邂逅：详解如何在HTML中引入和使用JSON数据

为什么要在HTML中使用JSON？

方法一：通过JavaScript在页面中直接引入（最常用）

步骤1：准备JSON数据

步骤2：在HTML中预留数据容器

步骤3：使用JavaScript解析并渲染数据

方法二：通过<script>标签引入外部JSON文件

步骤1：创建外部JSON文件

步骤2：使用JavaScript的Fetch API获取文件

相关阅读

后端怎么返回json类型的数据库

jsp怎么取json

java怎么转json中的中文

json可以处理什么样的数据库

发表评论取消回复

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

目录[+]

方法二：通过`<script>`标签引入外部JSON文件