如何通过 JSON 数据动态生成 HTML 项目卡片-html教程-PHP中文网

本文介绍如何使用 jQuery 读取 data.json 文件并动态渲染多个项目卡片，避免手动复制粘贴，实现静态网站内容的自动化更新。

本文介绍如何使用 jquery 读取 `data.json` 文件并动态渲染多个项目卡片，避免手动复制粘贴，实现静态网站内容的自动化更新。

在静态 HTML 网站中，手动维护项目信息（如标题、图片、描述、链接）不仅效率低，还极易出错。理想方案是将结构化数据统一存于 data.json，再通过前端脚本一次性生成全部卡片——这正是本文要解决的核心问题。

原始代码的问题在于：它反复操作同一组 DOM 元素 ID（如 #project、#project-title），导致每次循环都覆盖前一次内容，最终只显示最后一个项目。而正确的做法是：为每个项目动态创建独立的 HTML 结构，并追加到容器中。

以下是优化后的完整实现（需确保已引入 jQuery）：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

<!-- 在页面底部或 <head> 中引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>
$(document).ready(function() {
    $.getJSON('./data/data.json', function(data) {
        // 清空原有占位容器（可选，防止重复渲染）
        $('#projects-container').empty();

        // 遍历 projects 数组，为每个项目生成完整卡片 HTML
        data.projects.forEach(function(project) {
            const cardHTML = `
                <div class="isotope-item col-md-6 mb-5 ${project.section}">
                    <div class="card project-card">
                        <div class="row">
                            <div class="col-12 col-xl-5 card-img-holder">
                                @@##@@
                            
                            <div class="col-12 col-xl-7">
                                <div class="card-body">
                                    <h5 class="card-title">${project.title}
                                    <p class="card-text">${project.blurb}
                                
                            
                        
                        <div class="link-mask">
                            <a href="${project.link}" 
                               class="link-mask-link" 
                               target="_blank">
                            <div class="link-mask-text">
                                <a href="${project.link}" 
                                   class="btn btn-secondary" 
                                   target="_blank">
                                    <i class="fas fa-eye me-2">View Project
                                
                            
                        
                    
                `;

            // 追加到指定容器（推荐使用 class 或 data 属性而非 ID 容器）
            $('#projects-container').append(cardHTML);
        });
    }).fail(function(jqXHR, textStatus, errorThrown) {
        console.error('JSON 加载失败:', textStatus, errorThrown);
        // 可选：显示友好错误提示
        $('#projects-container').html('<p class="text-danger">项目数据加载失败，请检查 data.json 路径与格式。');
    });
});
</script>

? 关键修改说明：