基于AJAX JSON响应在JS中构建复杂HTML卡片的最佳实践

不需要逐个手动创建DOM元素，这种方式不仅繁琐，还容易因结构复杂出错。下面是几种更高效的方案，同时解决重复维护HTML的问题：

1. 使用JavaScript模板字符串（Template Literals） #

把卡片的HTML结构写成带占位符的模板字符串，拿到AJAX返回的JSON数据后，直接替换占位符生成完整的HTML字符串，再插入到DOM中。

示例代码：

// 定义卡片模板，用${}占位符对应JSON字段
function createCardHtml(data) {
  return `
    <div class="card">
      <h3 class="card-title">${data.title}</h3>
      <p class="card-content">${data.content}</p>
      <div class="card-footer">
        <span class="author">${data.author}</span>
        <span class="date">${data.publishedDate}</span>
      </div>
    </div>
  `;
}

// AJAX请求成功后插入新卡片
fetch('/api/new-card-data')
  .then(res => res.json())
  .then(newData => {
    const cardContainer = document.getElementById('card-container');
    cardContainer.insertAdjacentHTML('beforeend', createCardHtml(newData));
  });

这种方式的好处是HTML结构直观，和后端生成的结构保持一致即可，维护起来只需要修改这一个模板函数。

2. 使用HTML <template> 元素 #

在页面中定义一个隐藏的模板，里面写好卡片的完整结构，用标记类名标记需要替换的位置，JS中克隆模板内容后填充数据再插入DOM。

示例代码：

<!-- 页面中定义模板 -->
<template id="card-template">
  <div class="card">
    <h3 class="card-title"></h3>
    <p class="card-content"></p>
    <div class="card-footer">
      <span class="author"></span>
      <span class="date"></span>
    </div>
  </div>
</template>

function createCardFromTemplate(data) {
  const template = document.getElementById('card-template');
  const card = template.content.cloneNode(true);
  
  // 填充数据
  card.querySelector('.card-title').textContent = data.title;
  card.querySelector('.card-content').textContent = data.content;
  card.querySelector('.author').textContent = data.author;
  card.querySelector('.date').textContent = data.publishedDate;
  
  return card;
}

// AJAX请求后插入
fetch('/api/new-card-data')
  .then(res => res.json())
  .then(newData => {
    const cardContainer = document.getElementById('card-container');
    cardContainer.appendChild(createCardFromTemplate(newData));
  });

这种方式分离了HTML结构和JS逻辑，适合结构非常复杂的场景，模板在HTML中可直接和后端生成的结构对齐，维护更清晰。

3. 共享后端部分视图（推荐） #

既然用的是.NET Core，你可以把卡片的HTML结构做成部分视图（Partial View），比如_Card.cshtml。前端新增卡片时，直接请求这个部分视图（带上新数据参数），后端渲染好完整的HTML片段返回，前端直接插入DOM即可。

示例.NET Core Partial View (_Card.cshtml)：

@model YourNamespace.CardData
<div class="card">
  <h3 class="card-title">@Model.Title</h3>
  <p class="card-content">@Model.Content</p>
  <div class="card-footer">
    <span class="author">@Model.Author</span>
    <span class="date">@Model.PublishedDate.ToString("yyyy-MM-dd")</span>
  </div>
</div>

前端AJAX请求：

fetch('/Cards/GetNewCard', {
  method: 'GET',
  // 传递新数据的参数，比如id或者筛选条件
  params: { id: 123 }
})
.then(res => res.text())
.then(html => {
  const cardContainer = document.getElementById('card-container');
  cardContainer.insertAdjacentHTML('beforeend', html);
});

这种方式完全避免了前后端维护两份HTML结构的问题，所有卡片结构由后端的部分视图统一维护，前端只负责插入，是最理想的最佳实践——前后端用同一套模板，不会出现结构不一致的情况。

最佳实践总结 #

• 绝对不要手动逐个创建DOM元素（比如document.createElement('div')后逐层添加子元素），这种方式代码冗余、维护成本极高，结构复杂时极易出错。
• 核心原则是只维护一份HTML结构模板：要么前端用模板字符串/<template>元素，要么前后端共享后端的部分视图。后者更适配.NET Core项目，能彻底消除重复维护的痛点。

内容的提问来源于stack exchange，提问作者James Wilkinson