如何通过jQuery从URL获取JSON数据来增加网站卡片数量

原代码存在几个核心问题，导致无法实现动态增加卡片的需求：

• 循环内重复发起9次JSON请求，既浪费资源，还会因为异步回调的作用域问题导致数据填充错误
• 使用全局选择器（如.container-1_1 h4）只会覆盖页面中第一个卡片的内容，无法生成新卡片
• 第一条JSON数据缺少admin字段，直接读取会引发报错

以下是修正后的完整实现方案：

1. 调整HTML结构（添加卡片模板） #

将原有卡片改为隐藏的模板，方便JS克隆生成新卡片：

<div class="cards">
    <!-- 隐藏的卡片模板，用于克隆生成新卡片 -->
    <div class="card template" style="display: none;">
        <img class="card-img" src="" alt="Avatar">
        <div class="date-tag">
            <h6></h6>
        </div>
        <div class="container-1_1">
            <a href="#"><i class="fa-solid fa-user user-icon"></i></a>
            <h6 class="user-icon-h6"></h6>
            <a href="#"><i class="fa-solid fa-heart heart-icon"></i></a>
            <a href="#"><i class="fa-solid fa-comment comment-icon"></i></a>
            <h6 class="comment-icon-h6"></h6>
            <h6 class="heart-icon-h6"></h6>
            <h4></h4>
            <br>
            <p></p>
            <br>
            <a href="#" class="read-more">Read More...</a>
        </div>
    </div>
</div>

2. 修正后的jQuery代码 #

仅发起一次JSON请求，遍历数据批量生成卡片：

// 只请求一次JSON数据
$.getJSON("https://raw.githubusercontent.com/gaurav-2-0-0-2/Blog-template/main/cards.json", function(data) {
    // 遍历每一条JSON数据
    $.each(data, function(index, item) {
        // 克隆模板卡片，移除模板标识并显示
        const newCard = $(".card.template").clone().removeClass("template").show();
        
        // 填充当前卡片的数据
        newCard.find(".card-img").attr("src", item.img);
        newCard.find(".date-tag h6").text(item.datetime);
        newCard.find(".container-1_1 h4").text(item.title);
        newCard.find(".container-1_1 p").text(item.desc);
        // 兼容第一条数据没有admin字段的情况
        newCard.find(".user-icon-h6").text(item.admin || (item.datetime.includes("By:") ? item.datetime.split("By:")[1].trim() : ""));
        newCard.find(".comment-icon-h6").text(item.comment_count);
        newCard.find(".heart-icon-h6").text(item.like_count);
        
        // 将生成的新卡片添加到容器中
        $(".cards").append(newCard);
    });
});

核心优化说明 #

• 单次请求：避免重复请求相同资源，大幅提升加载效率
• 模板克隆：保证所有卡片结构完全一致，避免手动拼接HTML的繁琐和错误
• 局部选择器：使用newCard.find()仅操作当前卡片的元素，不会干扰其他卡片
• 字段兼容：处理数据字段不一致的情况，防止页面报错

内容的提问来源于stack exchange，提问作者Gaurav Tak