html如何使用json数据格式

步骤2：准备JSON数据

JSON数据可以来自两个主要途径：直接写在JavaScript中（适合静态数据）或通过API请求获取（适合动态数据，如后端接口）。

方式1：直接定义JSON数据

在JavaScript文件中，可以直接定义一个JSON格式的变量（注意：JSON本质是字符串，JavaScript中需要用对象或数组表示）：

// app.js
const userData = [
    { "id": 1, "name": "张三", "age": 25, "email": "zhangsan@example.com" },
    { "id": 2, "name": "李四", "age": 30, "email": "lisi@example.com" },
    { "id": 3, "name": "王五", "age": 28, "email": "wangwu@example.com" }
];

方式2：通过API获取JSON数据（更常见）

实际开发中，JSON数据通常存储在后端服务器，通过API（如RESTful API）返回，我们可以使用fetch API（现代浏览器支持）或XMLHttpRequest（传统方式）获取数据。

// app.js - 使用fetch获取JSON数据
fetch('https://api.example.com/users') // 替换为实际的API地址
    .then(response => {
        if (!response.ok) {
            throw new Error('网络响应错误');
        }
        return response.json(); // 将响应解析为JSON对象
    })
    .then(data => {
        renderUsers(data); // 获取数据后调用渲染函数
    })
    .catch(error => {
        console.error('获取数据失败:', error);
        document.getElementById('userList').innerHTML = '<li>加载失败，请稍后重试</li>';
    });

步骤3：解析JSON数据

JavaScript中处理JSON的核心方法是JSON.parse()和JSON.stringify()：

• JSON.parse()：将JSON字符串转换为JavaScript对象/数组。
  如果后端返回的是JSON字符串（如'{"name": "张三"}'），可以用JSON.parse()解析为对象：const obj = JSON.parse('{"name": "张三"}');。

• JSON.stringify()：将JavaScript对象/数组转换为JSON字符串。
  如果需要将对象发送给后端，可以用JSON.stringify()序列化：const jsonStr = JSON.stringify(obj);。

在上述示例中，fetch的response.json()已经自动调用了JSON.parse()，所以我们直接得到的是JavaScript对象,无需手动解析。

步骤4：动态渲染JSON数据到HTML

解析后的JavaScript对象可以通过DOM操作（如createElement、innerHTML等）动态生成HTML元素，并添加到页面容器中,以下是两种常见的渲染方式：

方式1：使用innerHTML（简单直接）

遍历JSON数据数组，拼接HTML字符串,然后一次性插入容器：

// app.js - 针对方式1（直接定义的userData）
function renderUsers(users) {
    const userList = document.getElementById('userList');
    let html = ''; // 拼接HTML字符串
    users.forEach(user => {
        html += `
            <li>
                <strong>${user.name}</strong>（${user.age}岁）<br>
                邮箱：${user.email}
            </li>
        `;
    });
    userList.innerHTML = html; // 一次性插入HTML
}
// 调用渲染函数（如果是直接定义的数据）
renderUsers(userData);

方式2：使用DOM API（更灵活，适合复杂结构）

通过document.createElement动态创建元素，避免字符串拼接的安全风险（如XSS攻击）：

// app.js - 针对方式2（fetch获取的数据）
function renderUsers(users) {
    const userList = document.getElementById('userList');
    userList.innerHTML = ''; // 清空容器
    users.forEach(user => {
        // 创建li元素
        const li = document.createElement('li');
        // 创建strong元素（姓名）
        const nameStrong = document.createElement('strong');
        nameStrong.textContent = user.name;
        // 创建换行符
        const br = document.createElement('br');
        // 创建span元素（年龄和邮箱）
        const ageSpan = document.createElement('span');
        ageSpan.textContent = `（${user.age}岁）`;
        const emailSpan = document.createElement('span');
        emailSpan.textContent = `邮箱：${user.email}`;
        // 组装li元素
        li.appendChild(nameStrong);
        li.appendChild(ageSpan);
        li.appendChild(br);
        li.appendChild(emailSpan);
        // 将li添加到ul
        userList.appendChild(li);
    });
}
// fetch获取数据后会自动调用renderUsers(data)

完整示例效果

假设我们使用方式1（直接定义的userData）和innerHTML渲染,最终页面会显示：

用户列表
- 张三（25岁）
  邮箱：zhangsan@example.com
- 李四（30岁）
  邮箱：lisi@example.com
- 王五（28岁）
  邮箱：wangwu@example.com

常见场景实践：从静态到动态

渲染列表数据（如商品列表、文章列表）

这是最常见的需求，核心逻辑与上述“用户列表”类似：通过fetch获取JSON数组，遍历后生成<li>、<div>等列表元素。

填充表单数据（如编辑用户信息）

如果JSON数据用于填充表单（如用户编辑页面），可以通过value