json怎么在html中调用

JSON怎么在HTML中调用：从基础到实践的完整指南

在Web开发中，JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，因其易读、易解析的特性，已成为前后端数据交互的主流选择，JSON数据究竟该如何在HTML中调用呢？本文将从JSON的基础概念出发，结合具体代码示例，详细讲解在HTML中获取、解析和使用JSON数据的多种方法,帮助开发者快速这一核心技能。

JSON是什么？为什么要在HTML中使用它？

JSON是一种基于JavaScript对象语法的数据格式，采用“键值对”（Key-Value Pair）的形式存储数据，结构清晰，易于人阅读和编写,也易于机器解析和生成。

{
  "name": "张三",
  "age": 25,
  "hobbies": ["阅读", "编程", "旅行"],
  "isStudent": false
}

在HTML中调用JSON的核心目的是将后端或外部数据动态展示在前端页面上，相比传统的XML，JSON数据量更小、解析更快，且与JavaScript原生兼容，无需额外工具即可处理，因此成为AJAX请求、API数据交互的首选格式。

在HTML中调用JSON的常见方法

方法1：直接在HTML中内嵌JSON（静态数据）

如果JSON数据是固定的（如页面初始化配置、静态文本等），可以直接在HTML文件中通过<script>标签内嵌JSON数据，JSON会被解析为JavaScript对象,供页面调用。

示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">内嵌JSON示例</title>
</head>
<body>
    <h1>用户信息</h1>
    <div id="userInfo"></div>
    <!-- 内嵌JSON数据，通过type="application/json"声明格式 -->
    <script type="application/json" id="userData">
    {
        "name": "李四",
        "age": 30,
        "city": "北京",
        "skills": ["JavaScript", "Python", "SQL"]
    }
    </script>
    <script>
        // 获取JSON字符串并解析为JavaScript对象
        const jsonStr = document.getElementById('userData').textContent;
        const userData = JSON.parse(jsonStr);
        // 将数据渲染到页面
        const userInfoDiv = document.getElementById('userInfo');
        userInfoDiv.innerHTML = `
            <p><strong>姓名：</strong>${userData.name}</p>
            <p><strong>年龄：</strong>${userData.age}</p>
            <p><strong>城市：</strong>${userData.city}</p>
            <p><strong>技能：</strong>${userData.skills.join('、')}</p>
        `;
    </script>
</body>
</html>

关键点：

通过<script type="application/json">声明JSON数据，避免被浏览器误执行为JavaScript代码。
使用JSON.parse()将JSON字符串解析为JavaScript对象，之后即可通过点语法（如userData.name）访问数据。

方法2：通过外部JSON文件调用（动态数据）

实际开发中，JSON数据通常存储在外部文件中（如data.json），通过HTTP请求获取，这里介绍两种主流方式：fetch API（现代推荐）和XMLHttpRequest（传统兼容）。

（1）使用`fetch` API（ES6+，推荐）

fetch是现代浏览器提供的原生API，用于发起网络请求，支持Promise语法,代码更简洁。

步骤：

创建外部JSON文件（如data.json如下：

{
    "title": "产品列表",
    "products": [
        {"id": 1, "name": "笔记本电脑", "price": 4999},
        {"id": 2, "name": "无线鼠标", "price": 199},
        {"id": 3, "name": "机械键盘", "price": 399}
    ]
}

在HTML中通过fetch请求并渲染数据：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>fetch调用JSON示例</title>
    <style>
        table { border-collapse: collapse; width: 50%; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
    </style>
</head>
<body>
    <h1 id="pageTitle"></h1>
    <table id="productTable">
        <thead>
            <tr>
                <th>ID</th>
                <th>产品名称</th>
                <th>价格（元）</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <script>
        // 发起fetch请求获取JSON数据
        fetch('data.json')
            .then(response => {
                // 检查响应状态，确保请求成功
                if (!response.ok) {
                    throw new Error('网络请求失败，状态码：' + response.status);
                }
                return response.json(); // 将响应体解析为JSON对象
            })
            .then(data => {
                // 渲染标题
                document.getElementById('pageTitle').textContent = data.title;
                // 渲染产品列表
                const tbody = document.querySelector('#productTable tbody');
                data.products.forEach(product => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${product.id}</td>
                        <td>${product.name}</td>
                        <td>${product.price}</td>
                    `;
                    tbody.appendChild(row);
                });
            })
            .catch(error => {
                console.error('获取JSON数据失败：', error);
                document.getElementById('pageTitle').textContent = '数据加载失败';
            });
    </script>
</body>
</html>

关键点：

fetch()返回一个Promise，通过.then()处理响应。
response.json()用于将HTTP响应流解析为JSON对象（返回另一个Promise）。
通过.catch()捕获请求过程中的错误（如网络异常、文件不存在等）。

（2）使用`XMLHttpRequest`（传统方式）

XMLHttpRequest是早期的AJAX技术，所有浏览器均支持，但代码相对繁琐,适用于需要兼容旧版浏览器的场景。

示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">XMLHttpRequest调用JSON示例</title>
</head>
<body>
    <div id="result"></div>
    <script>
        const xhr = new XMLHttpRequest();
        // 配置请求：GET方法，目标为data.json，异步请求（true）
        xhr.open('GET', 'data.json', true);
        // 监听请求状态变化
        xhr.onreadystatechange = function() {
            // readyState为4表示请求完成，status为200表示请求成功
            if (xhr.readyState === 4 && xhr.status === 200) {
                const data = JSON.parse(xhr.responseText); // 解析JSON字符串
                const resultDiv = document.getElementById('result');
                resultDiv.innerHTML = `
                    <h2>${data.name}</h2>
                    <p>年龄：${data.age}</p>
                `;
            } else if (xhr.readyState === 4) {
                console.error('请求失败，状态码：' + xhr.status);
            }
        };
        // 发送请求
        xhr.send();
    </script>
</body>
</html>

关键点：

通过onreadystatechange事件监听请求状态，readyState === 4时请求完成。
responseText属性获取服务器返回的原始JSON字符串，需通过JSON.parse()解析。

方法3：通过JavaScript动态生成JSON（临时数据）

有时需要根据用户操作或页面逻辑动态生成JSON数据（如表单提交前的数据封装），此时可直接在JavaScript中创建对象，再通过JSON.stringify()转换为JSON字符串（如需发送到后端），或直接使用对象（前端调用）。

示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">动态生成JSON示例</title>
</head>
<body>
    <button id="generateBtn">生成并显示JSON</button>
    <pre id="jsonOutput"></pre>
    <script>
        document.getElementById('generateBtn').addEventListener('click', function() {
            // 动态创建JavaScript对象（模拟从用户输入获取的数据）
            const dynamicData = {
                timestamp: new Date().toISOString(),
                action: "button_click",
                metadata: {
                    userAgent: navigator.userAgent,
                    screenWidth: window.screen.width
                }
            };
            // 将对象转换为JSON字符串（可用于发送或存储）
            const jsonString = JSON.stringify(dynamicData, null, 2); // null表示不过滤属性，2表示缩进2空格
            // 在页面显示JSON字符串
            document.getElementById('jsonOutput').textContent = jsonString;
            //

正文

json怎么在html中调用