如何用JS将JSON响应中的多对象数据渲染到HTML页面

首先，你需要在HTML中准备一个用于承载所有消息的容器，替代原来只能显示单条数据的独立元素：

<div id="messages-container"></div>

然后修改AJAX的成功回调函数，遍历result.messages数组，逐个生成消息的HTML结构并追加到容器中：

success:function(result){
  // 获取消息容器
  const messagesContainer = $('#messages-container');
  // 清空容器，防止重复加载旧内容
  messagesContainer.empty();

  // 遍历所有消息对象
  result.messages.forEach(message => {
    // 构建单条消息的HTML片段
    const messageElement = `
      <div class="message-card">
        <p><strong>日期:</strong> ${message.date}</p>
        <p><strong>用户名:</strong> ${message.username}</p>
        <p>${message.message}</p>
        <hr>
      </div>
    `;
    // 将当前消息追加到容器内
    messagesContainer.append(messageElement);
  });
}

备选方案（兼容旧浏览器） #

如果需要兼容不支持forEach的老旧浏览器，可以用传统的for循环实现：

success:function(result){
  const messagesContainer = $('#messages-container');
  messagesContainer.empty();

  for (let i = 0; i < result.messages.length; i++) {
    const message = result.messages[i];
    const messageElement = `
      <div class="message-card">
        <p><strong>日期:</strong> ${message.date}</p>
        <p><strong>用户名:</strong> ${message.username}</p>
        <p>${message.message}</p>
        <hr>
      </div>
    `;
    messagesContainer.append(messageElement);
  }
}

可选美化样式 #

你可以给消息卡片添加CSS样式提升可读性：

.message-card {
  margin: 10px 0;
  padding: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background-color: #f9f9f9;
}

.message-card p {
  margin: 5px 0;
}

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