HTML类卡片数据渲染异常求助：Ajax加载SQL数据未显示

嘿，作为前端新手遇到这种问题很正常，我帮你梳理下问题所在和解决办法：

1. 核心问题：数据未显示的原因 #

你在Ajax里只给.card元素添加了data-room-id和data-room-name这两个自定义属性，但没有把房间号（比如100、101）作为文本内容插入到card标签内部，所以页面上只会渲染出空的卡片容器，看不到实际数据。

2. 次要问题：HTML结构嵌套错误 #

原HTML中#roomList本身就是一个.card元素，但你的Ajax代码却往这个卡片里又嵌套了.row > .column > .card的结构，这会导致卡片套卡片的混乱布局，完全不符合你最初想做“一行多卡片”的需求。

修正后的完整代码 #

第一步：调整HTML结构

把#roomList改成承载卡片的.row容器，这样Ajax加载的卡片可以直接追加到这里：

<style>
  .column { float: left; width: 25%; padding: 0 10px; }
  .row {margin: 0 -5px;}
  .card { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); padding: 16px; text-align: center; background-color: #f1f1f1; }
</style>

<div class="col-md-8">
  <!-- 把roomList改成row容器，用来承载多个column卡片 -->
  <div id="roomList" class="row">
  </div>
</div>

第二步：修正Ajax代码

用ES6模板字符串简化HTML拼接，同时把房间号内容插入到card内部，还要修正结构避免嵌套错误：

$.ajax({
  url: '/HouseKeeping/OutOfOrderTXN/RoomList',
  dataType: 'json',
  method: 'GET',
  success: function (data) {
    $.each(data, function (index, eachRoomList) {
      // 用模板字符串拼接HTML，清晰不易出错，同时加入房间号文本
      $('#roomList').append(`
        <div class="column">
          <div class="card" 
               data-room-id="${eachRoomList.Id}" 
               data-room-name="${eachRoomList.RoomName}">
            ${eachRoomList.RoomName} <!-- 这里就是显示的房间号 -->
          </div>
        </div>
      `);
    });
  },
  error: function (error) {
    // 建议添加错误日志，方便排查请求失败的情况
    console.error('加载房间列表出错啦:', error);
  }
});

额外小提示 #

• 用模板字符串（反引号`）拼接HTML比传统的字符串加号拼接更清晰，不容易出现引号嵌套错误
• 可以给卡片添加hover效果增强交互，比如.card:hover { transform: translateY(-5px); transition: 0.3s; }
• 如果需要响应式布局，在小屏幕上让卡片占满宽度，可以加媒体查询：

  @media screen and (max-width: 768px) {
    .column { width: 100%; margin-bottom: 10px; }
  }
  

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