正文

如何在html中写json格式数据

admin
admin V管理员 /0 评论 /2 阅读
1226

HTML中嵌入JSON数据的完整指南

在现代Web开发中,JSON（JavaScript Object Notation）已经成为数据交换的事实标准，它轻量、易于人阅读和编写，并且能被JavaScript轻松解析，我们如何在HTML页面中有效地使用JSON格式数据呢？本文将为你详细介绍几种主流的方法，从最基础的到最现代的，并提供清晰的代码示例。

使用 <script> 标签（最经典、最兼容）

如何在html中写json格式数据

这是最传统也是最通用的方法,我们将JSON数据直接作为JavaScript代码的一部分，存放在一个<script>标签中，浏览器会将其视为JavaScript代码来执行，但由于JSON本身就是JavaScript对象的语法，它不会产生任何副作用，只是定义了一个变量或函数。

适用场景：

  • 在页面加载时直接初始化一些静态数据。
  • 作为后端API返回数据的本地模拟（Mock Data）。

实现步骤：

  1. 创建一个<script>
  2. 将类型设置为application/json，这有助于编辑器和工具识别其内容为JSON。
  3. 给<script>标签一个唯一的id，方便我们后续通过JavaScript来获取它。
  4. 在标签内,直接写入你的JSON数据。

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">JSON in HTML Script Tag</title>
</head>
<body>
    <h1>用户信息</h1>
    <div id="user-info-container"></div>
    <!-- 1. 定义JSON数据 -->
    <script id="user-json-data" type="application/json">
    {
        "userId": 101,
        "username": "张三",
        "email": "zhangsan@example.com",
        "isActive": true,
        "roles": ["admin", "editor"],
        "profile": {
            "age": 30,
            "city": "北京"
        }
    }
    </script>
    <!-- 2. 使用JavaScript获取并解析JSON数据 -->
    <script>
        // 通过id找到script标签
        const scriptTag = document.getElementById('user-json-data');
        // 获取标签内的文本内容
        const jsonString = scriptTag.textContent;
        // 将JSON字符串解析为JavaScript对象
        const userObject = JSON.parse(jsonString);
        // 现在你可以像使用普通JS对象一样使用userObject
        console.log("用户名:", userObject.username);
        console.log("角色:", userObject.roles.join(', '));
        // 将数据动态渲染到页面上
        const container = document.getElementById('user-info-container');
        container.innerHTML = `
            <p><strong>用户ID:</strong> ${userObject.userId}</p>
            <p><strong>邮箱:</strong> ${userObject.email}</p>
            <p><strong>状态:</strong> ${userObject.isActive ? '活跃' : '未激活'}</p>
            <p><strong>所在城市:</strong> ${userObject.profile.city}</p>
        `;
    </script>
</body>
</html>

优点：

  • 兼容性极佳：所有浏览器都支持。
  • 简单直接：无需任何外部库。

缺点：

  • 数据与HTML结构混合,对于大型数据集可能使HTML文件变得臃肿。
  • 不适合存储频繁变化的数据,因为修改它需要改变HTML源文件。

使用 <script> 标签 + JavaScript模块（现代推荐）

如果你使用的是现代JavaScript（ES6+），可以将JSON数据放在一个单独的.json文件中，然后通过<script>标签的type="module"属性来导入。

适用场景：

  • 构建现代化的单页应用（SPA）。
  • 将数据与逻辑、视图分离，提高代码的可维护性。

实现步骤：

  1. 创建一个JSON文件,data.json。
  2. 在HTML文件中,使用<script type="module">来导入这个JSON文件，注意，import语句必须在模块内部。

代码示例：

data.json 文件内容：

{
    "apiEndpoint": "https://api.example.com/v1",
    "settings": {
        "theme": "dark",
        "notifications": true
    }
}

index.html 文件内容：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">JSON in HTML Module</title>
</head>
<body>
    <h1>应用配置</h1>
    <div id="config-display"></div>
    <script type="module">
        // 导入JSON文件
        import config from './data.json';
        // 导入的config变量已经是一个JavaScript对象
        console.log("API端点:", config.apiEndpoint);
        console.log("当前主题:", config.settings.theme);
        // 渲染到页面
        const display = document.getElementById('config-display');
        display.innerHTML = `
            <p><strong>API地址:</strong> ${config.apiEndpoint}</p>
            <p><strong>主题模式:</strong> ${config.settings.theme}</p>
        `;
    </script>
</body>
</html>

优点：

  • 关注点分离：数据、逻辑和HTML完全分开，结构清晰。
  • 可维护性高：数据文件可以独立更新，无需触及HTML。
  • 利用现代JS生态：非常适合与打包工具（如Vite, Webpack）配合使用。

缺点：

  • 需要服务器环境（或支持本地文件协议file://的特定配置）来加载模块，直接在浏览器中打开HTML文件可能会因为CORS策略而失败。

使用 <template> 标签（结合数据绑定）

这种方法结合了<script>标签存储数据和<template>标签存储HTML结构，它非常适合需要根据JSON数据动态生成复杂UI的场景，虽然现代框架（如Vue, React）有更优雅的实现方式，但这个原生方法能很好地展示其核心思想。

适用场景：

  • 需要根据数据动态生成列表或卡片。
  • 在不使用前端框架的情况下,实现数据驱动的视图更新。

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">JSON in HTML Template</title>
    <style>
        .product-card { border: 1px solid #ccc; padding: 10px; margin: 10px; border-radius: 5px; }
        .product-card h3 { margin-top: 0; }
    </style>
</head>
<body>
    <h1>产品列表</h1>
    <div id="products-container"></div>
    <!-- 1. 定义JSON数据 -->
    <script id="products-json" type="application/json">
    [
        {
            "id": 1,
            "name": "智能手机",
            "price": 4999,
            "inStock": true
        },
        {
            "id": 2,
            "name": "笔记本电脑",
            "price": 8999,
            "inStock": false
        },
        {
            "id": 3,
            "name": "无线耳机",
            "price": 899,
            "inStock": true
        }
    ]
    </script>
    <!-- 2. 定义可复用的HTML模板 -->
    <template id="product-template">
        <div class="product-card">
            <h3></h3>
            <p>价格: ¥<span class="price"></span></p>
            <p class="stock-status"></p>
        </div>
    </template>
    <script>
        // 获取JSON数据
        const scriptTag = document.getElementById('products-json');
        const products = JSON.parse(scriptTag.textContent);
        // 获取模板和容器
        const template = document.getElementById('product-template');
        const container = document.getElementById('products-container');
        // 遍历数据，为每个产品创建一个克隆的模板并填充数据
        products.forEach(product => {
            const clone = template.content.cloneNode(true);
            clone.querySelector('h3').textContent = product.name;
            clone.querySelector('.price').textContent = product.price;
            clone.querySelector('.stock-status').textContent = product.inStock ? '有货' : '缺货';
            clone.querySelector('.stock-status').style.color = product.inStock ? 'green' : 'red';
            container.appendChild(clone);
        });
    </script>
</body>
</html>

优点：

  • 结构清晰：数据、模板和渲染逻辑分离。
  • 性能较好：<template>标签中的内容不会被浏览器渲染，只在需要时克隆使用，非常适合重复性结构。

缺点：

  • 对于复杂应用,手动操作DOM会变得繁琐且容易出错。

总结与最佳实践

方法 优点 缺点 适用场景
<script>
足球直播 足球直播 足球直播 足球直播 足球直播 足球直播 足球直播 足球直播 新浪足球直播 新浪足球直播 足球直播 足球直播 快连VPN 快连官网 足球直播 足球直播 快连VPN 快连官网 Google Chrome Google Chrome 快连VPN letsVPN chrome浏览器 谷歌浏览器 足球直播 足球直播 欧易平台 欧易平台 欧易下载 欧易平台 欧易下载 欧易平台 欧易下载 欧易下载 欧易 欧易下载 欧易APP
内容声明:本文中引用的各种信息及资料(包括但不限于文字、数据、图表及超链接等)均来源于该信息及资料的相关主体(包括但不限于公司、媒体、协会等机构》的官方网站或公开发表的信息，内容仅供参考使用!本站为非盈利性质站点,本着免费分享原则,发布内容不收取任何费用也不接任何广告! 邮箱：i77i88@88.com
-- 展开阅读全文 --