json文件怎么读取html

从JSON到HTML：如何在网页中读取并展示JSON数据**

在现代Web开发中，JSON（JavaScript Object Notation）因其轻量级、易读易写的特性，成为了前后端数据交换的主流格式之一，而HTML（HyperText Markup Language）则是构建网页内容的标准标记语言，我们究竟该如何读取JSON文件，并将其内容有效地呈现在HTML页面上呢？本文将详细介绍几种常见的方法,帮助你实现从JSON数据到HTML展示的完整流程。

理解核心概念：JSON与HTML的关系

我们需要明确一点：HTML本身并不能直接“读取”JSON文件，HTML是用于描述页面结构和内容的，而JSON是一种数据存储格式，真正的读取和解析工作需要借助JavaScript来完成，JavaScript运行在浏览器端，它可以发起网络请求获取JSON文件，然后解析数据，最后通过操作DOM（文档对象模型）将数据动态插入到HTML元素中,从而实现数据的展示。

整个流程可以概括为：HTML提供容器 -> JavaScript发起请求获取JSON -> JavaScript解析JSON -> JavaScript操作HTML元素展示数据。

准备工作：一个简单的JSON文件

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

{
  "users": [
    {
      "id": 1,
      "name": "张三",
      "email": "zhangsan@example.com",
      "age": 28
    },
    {
      "id": 2,
      "name": "李四",
      "email": "lisi@example.com",
      "age": 32
    },
    {
      "id": 3,
      "name": "王五",
      "email": "wangwu@example.com",
      "age": 24
    }
  ]
}

我们的目标是将这些用户信息以表格或列表的形式展示在HTML页面上。

方法一：使用原生JavaScript（Fetch API - 推荐方式）

Fetch API是现代浏览器中提供的一种强大而简洁的API，用于发起网络请求和获取资源,它是读取JSON文件的推荐方式。

步骤1：创建HTML容器

在HTML文件中，我们创建一个用于展示数据的容器，比如一个<div>或<table>。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">JSON数据展示</title>
    <style>
        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>
    <div id="user-container">
        <!-- 数据将在这里动态插入 -->
        <p>加载中...</p>
    </div>
    <script src="app.js"></script> <!-- 我们将JavaScript代码放在外部文件中 -->
</body>
</html>

步骤2：使用JavaScript获取并解析JSON数据

创建一个app.js文件,编写以下代码：

// 等待DOM完全加载后再执行脚本
document.addEventListener('DOMContentLoaded', function() {
    const userContainer = document.getElementById('user-container');
    // 使用Fetch API获取JSON文件
    fetch('data.json')
        .then(response => {
            // 检查请求是否成功
            if (!response.ok) {
                throw new Error('网络响应不正常');
            }
            // 将响应体解析为JSON对象
            return response.json();
        })
        .then(data => {
            // 清空加载提示
            userContainer.innerHTML = '';
            // 创建表格元素
            const table = document.createElement('table');
            const thead = document.createElement('thead');
            const tbody = document.createElement('tbody');
            // 创建表头
            const headerRow = document.createElement('tr');
            const headers = ['ID', '姓名', '邮箱', '年龄'];
            headers.forEach(headerText => {
                const th = document.createElement('th');
                th.textContent = headerText;
                headerRow.appendChild(th);
            });
            thead.appendChild(headerRow);
            table.appendChild(thead);
            // 创建表格内容（遍历users数组）
            data.users.forEach(user => {
                const row = document.createElement('tr');
                const idCell = document.createElement('td');
                idCell.textContent = user.id;
                row.appendChild(idCell);
                const nameCell = document.createElement('td');
                nameCell.textContent = user.name;
                row.appendChild(nameCell);
                const emailCell = document.createElement('td');
                emailCell.textContent = user.email;
                row.appendChild(emailCell);
                const ageCell = document.createElement('td');
                ageCell.textContent = user.age;
                row.appendChild(ageCell);
                tbody.appendChild(row);
            });
            table.appendChild(tbody);
            userContainer.appendChild(table);
        })
        .catch(error => {
            console.error('获取JSON数据时出错:', error);
            userContainer.innerHTML = '<p>加载数据失败，请稍后再试。</p>';
        });
});

说明：

fetch('data.json')：发起对data.json文件的GET请求。
.then(response => response.json())：第一个then接收响应对象，response.json()方法将响应体读取并解析为JSON对象。
.then(data => {...})：第二个then接收解析后的JSON数据（即data对象），然后我们操作DOM,创建表格元素并将数据填充进去。
.catch(error => {...})：如果请求过程中发生错误（如文件不存在、网络问题等），catch会捕获错误并进行处理。

注意： 如果直接在浏览器中打开HTML文件（通过file://协议），由于浏览器的安全策略（CORS），fetch可能会被阻止，最好通过本地服务器（如VS Code的Live Server插件）来运行。

方法二：使用原生JavaScript（XMLHttpRequest - 传统方式）

在Fetch API出现之前，XMLHttpRequest（XHR）是用于异步HTTP请求的标准方式，虽然现在Fetch API更推荐,但了解XHR仍然有一定价值。

// 在app.js中替换fetch部分的代码
document.addEventListener('DOMContentLoaded', function() {
    const userContainer = document.getElementById('user-container');
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'data.json', true); // true表示异步请求
    xhr.onload = function() {
        if (xhr.status >= 200 && xhr.status < 300) {
            const data = JSON.parse(xhr.responseText);
            // 与Fetch API中第二个then块中的DOM操作代码相同
            userContainer.innerHTML = '';
            // ... 创建表格并填充数据的代码 ...
            // (为了简洁，这里省略了与上面相同的表格创建代码，实际使用时需复制)
            console.log('数据加载成功:', data);
        } else {
            console.error('请求失败，状态码:', xhr.status);
            userContainer.innerHTML = '<p>加载数据失败，请稍后再试。</p>';
        }
    };
    xhr.onerror = function() {
        console.error('网络请求错误');
        userContainer.innerHTML = '<p>网络错误，请检查连接。</p>';
    };
    xhr.send();
});

说明：

创建XMLHttpRequest对象。
open(method, url, async)：初始化请求。
onload：请求完成且响应已就绪时触发,我们在这里检查状态码并解析响应文本。
onerror：请求发生错误时触发。
send()：发送请求。

方法三：使用JavaScript库（如jQuery）

如果你项目中使用了jQuery库,读取JSON文件会更加简洁。

步骤1：引入jQuery库

在HTML文件中引入jQuery：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

步骤2：使用jQuery的$.getJSON()方法

$(document).ready(function() {
    $('#user-container').html('<p>加载中...</p>');
    $.getJSON('data.json', function(data) {
        $('#user-container').html('');
        // 使用jQuery创建和操作元素
        let table = $('<table></table>');
        let thead = $('<thead></thead>');
        let tbody = $('<tbody></tbody>');
        let headerRow = $('<tr></tr>');
        let headers = ['ID', '姓名', '邮箱', '年龄'];
        headers.forEach(function(headerText) {
            thead.append($('<th></th>').text(headerText));
        });
        headerRow.append(thead);
        table.append(headerRow);
        data.users.forEach(function(user) {
            let row = $('<tr></tr>');
            row.append($('<td></td>').text(user.id));
            row.append($('<td></td>').text(user.name));
            row.append($('<td></td>').text(user.email));
            row.append($('<td></td>').text(user.age));
            tbody.append(row);
        });
        table.append(tbody);
        $('#user-container