json如何写在html

HTML中嵌入JSON数据的实用指南**

在Web开发中,JSON（JavaScript Object Notation）因其轻量级、易读以及与JavaScript天然的亲和力，成为了数据交换的主流格式，而HTML作为网页的骨架，常常需要展示或处理来自后端的数据，这时将JSON数据嵌入到HTML中就显得尤为重要，本文将详细介绍几种在HTML中写入JSON数据的方法及其应用场景。

为什么要在HTML中写入JSON？

在HTML中写入JSON数据主要有以下几个目的：

数据存储：将结构化数据直接嵌入HTML页面，供前端JavaScript直接读取和使用，无需额外的AJAX请求。
配置信息：传递一些页面初始化所需的配置参数。
国际化和本地化：存储不同语言的文本内容。
模板数据：为某些前端模板引擎提供初始数据。

使用`<script>`标签（最常用且推荐）

这是在HTML中嵌入JSON数据最标准、最安全的方法，我们将JSON数据包裹在一个<script>标签中，并通过设置type属性为application/json来标识其内容类型，这样做的好处是浏览器不会尝试将这段JSON作为JavaScript代码执行，同时JavaScript可以轻松地访问它。

示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">JSON in HTML Example</title>
</head>
<body>
    <h1>用户信息</h1>
    <div id="user-info"></div>
    <!-- 使用 script 标签嵌入 JSON 数据 -->
    <script type="application/json" id="user-data">
        {
            "userId": 12345,
            "username": "张三",
            "email": "zhangsan@example.com",
            "isActive": true,
            "roles": ["admin", "editor"],
            "address": {
                "city": "北京",
                "district": "朝阳区"
            },
            "joinDate": "2023-01-15T08:00:00Z"
        }
    </script>
    <script>
        // 获取 script 标签中的 JSON 字符串
        const jsonScript = document.getElementById('user-data');
        const jsonString = jsonScript.textContent;
        // 解析 JSON 字符串为 JavaScript 对象
        const userData = JSON.parse(jsonString);
        // 使用数据并动态更新 HTML
        const userInfoDiv = document.getElementById('user-info');
        userInfoDiv.innerHTML = `
            <p><strong>用户ID:</strong> ${userData.userId}</p>
            <p><strong>用户名:</strong> ${userData.username}</p>
            <p><strong>邮箱:</strong> ${userData.email}</p>
            <p><strong>状态:</strong> ${userData.isActive ? '活跃' : '未激活'}</p>
            <p><strong>角色:</strong> ${userData.roles.join(', ')}</p>
            <p><strong>城市:</strong> ${userData.address.city}</p>
            <p><strong>加入日期:</strong> ${new Date(userData.joinDate).toLocaleDateString()}</p>
        `;
    </script>
</body>
</html>

说明：

type="application/json"：明确告诉浏览器这不是可执行脚本，而是数据。
id属性：方便通过JavaScriptgetElementById等方法获取该<script>元素。
textContent：获取<script>标签内的纯文本内容，即JSON字符串。
JSON.parse()：将JSON字符串解析为JavaScript对象，之后就可以正常操作了。

使用`<data>`标签（语义化）

HTML5引入了<data>标签，用于将内容与机器可读的翻译进行关联，虽然它不像<script>标签那样直接用于存储复杂JSON对象，但对于简单的键值对数据，它可以提供更好的语义化。

示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">使用 data 标签</title>
</head>
<body>
    <h1>产品信息</h1>
    <p>产品ID: <span id="product-id">001</span></p>
    <p>产品名称: <span id="product-name">智能手表</span></p>
    <!-- 使用 data 标签存储机器可读的数据 -->
    <data value='{"productId": "001", "productName": "智能手表", "price": 1299}' id="product-data">
        智能手表 (ID: 001)
    </data>
    <script>
        const dataElement = document.getElementById('product-data');
        const productInfo = JSON.parse(dataElement.getAttribute('value'));
        console.log('产品价格:', productInfo.price); // 输出: 1299
        // 可以根据需要更新页面
        document.getElementById('product-id').textContent = productInfo.productId;
        document.getElementById('product-name').textContent = productInfo.productName;
    </script>
</body>
</html>

说明：

value属性：存储机器可读的数据，这里我们放了JSON字符串。
适用于：简单的、结构化的数据，希望与用户可见内容关联的场景。
对于复杂的嵌套JSON,<script>标签更灵活。

使用HTML5自定义数据属性（`data-*`）

对于非常简单的、需要直接绑定到HTML元素上的JSON数据，可以使用HTML5的自定义数据属性（data-*），但需要注意，data-*属性的值只能是字符串，如果需要存储复杂对象，需要先JSON.stringify()，读取后再JSON.parse()。

示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">使用 data-* 属性</title>
</head>
<body>
    <h1>任务列表</h1>
    <ul id="task-list">
        <li data-task-id="1" data-task-info='{"title": "完成报告", "priority": "high", "dueDate": "2023-10-20"}'>完成报告</li>
        <li data-task-id="2" data-task-info='{"title": "发送邮件", "priority": "medium", "dueDate": "2023-10-18"}'>发送邮件</li>
        <li data-task-id="3" data-task-info='{"title": "团队会议", "priority": "low", "dueDate": "2023-10-22"}'>团队会议</li>
    </ul>
    <script>
        const taskList = document.getElementById('task-list');
        const tasks = taskList.getElementsByTagName('li');
        for (let task of tasks) {
            const taskId = task.getAttribute('data-task-id');
            const taskInfoStr = task.getAttribute('data-task-info');
            const taskInfo = JSON.parse(taskInfoStr);
            console.log(`任务ID: ${taskId}, 标题: ${taskInfo.title}, 优先级: ${taskInfo.priority}, 截止日期: ${taskInfo.dueDate}`);
            // 可以根据优先级添加不同的样式
            if (taskInfo.priority === 'high') {
                task.style.color = 'red';
            } else if (taskInfo.priority === 'medium') {
                task.style.color = 'orange';
            }
        }
    </script>
</body>
</html>

说明：

data-task-info：自定义属性名，data-是前缀，后面可以跟任意字符串。
适用于：需要将少量、简单的数据直接绑定到页面上的特定元素。
局限性：属性值是字符串，复杂对象需要序列化和反序列化，且可读性在HTML中会稍差。

注意事项

JSON格式有效性：确保嵌入的JSON数据格式完全正确，否则JSON.parse()会失败，注意引号、逗号、括号的匹配。
安全性：如果JSON数据来自不可信的外部源，直接使用JSON.parse()可能导致XSS（跨站脚本攻击）等安全风险，虽然<script type="application/json">本身不会被浏览器执行，但如果数据中包含恶意脚本，并在后续被错误地以JavaScript代码方式处理（例如使用eval()），仍然有风险，始终对来自外部的数据进行适当的清理和验证。
可读性：对于非常庞大的JSON数据，直接嵌入HTML可能会影响代码的可读性和维护性，这种情况下，通常建议通过AJAX/Fetch从服务器异步加载。
转义：如果JSON数据中包含HTML特殊字符（如<, >, &, , ），在将其插入到HTML内容时，需要进行适当的HTML转义，以防止XSS攻击，现代JavaScript模板引擎（如模板字符串、React的JSX等）通常会自动处理转义。