本文介绍如何根据 ajax 返回数据中的 `bot` 布尔字段，动态为聊天消息容器添加 `right` 或默认类，从而在前端区分用户消息（左对齐）与机器人消息（右对齐），并保持 html 结构简洁、css 可扩展。
在构建实时聊天界面时，仅靠统一的 .chat 类无法体现消息发送方的身份差异。为实现“用户消息靠左、机器人消息靠右”的视觉逻辑，关键在于将后端返回的 model.bot 布尔值映射为前端 CSS 类名，并将其动态注入到消息容器元素中。
核心思路是：在 JavaScript 模板字符串拼接前，用三元表达式判断 model.bot 值，生成对应类名字符串（如 'right' 或空字符串），再将其插入 <div class='chat ${botclass}'> 的 class 属性中。这样既无需重复编写 DOM 操作逻辑，也避免了冗余的条件分支。
以下是优化后的完整 JS 实现（含必要注释）：
$(document).ready(function() {
function imgMarkup(model) {
return model.mediasrc
? `<img class="imgchat" src="../static/${model.mediasrc}.png" alt="media">`
: '';
}
setInterval(function() {
$.ajax({
type: 'GET',
url: '/checkview',
success: function(response) {
console.log('Received messages:', response.models_to_return);
$('#display').empty();
response.models_to_return.forEach(function(model) {
// ✅ 动态决定额外 CSS 类：bot 为 true → 添加 'right'
const botClass = model.bot ? 'right' : '';
// ✅ 拼接完整 HTML 片段，支持多类共存
const temp = `
<div class="chat ${botClass}">
<span class="time-left">${model.datetime}</span>
<b>${model.user_id}</b>
<p>${model.room}</p>
${imgMarkup(model)}
</div>
`;
$('#display').append(temp);
});
},
error: function(xhr, status, err) {
console.warn('AJAX request failed:', status, err);
}
});
}, 1000);
});⚠️ 注意事项与最佳实践：
立即学习“前端免费学习笔记（深入）”；
-
CSS 需补充 .chat.right 样式：仅添加类名无效，必须在 CSS 中定义其布局行为。例如：
.chat { max-width: 80%; margin: 0.5em 0; padding: 0.75em 1em; } .chat.right { margin-left: auto; /* 推向右侧 */ background-color: #007bff; /* 区分色 */ } .chat:not(.right) { background-color: #6c757d; /* 用户消息背景 */ } - 模板字符串安全建议：若 model.user_id 或 model.room 可能含 HTML 特殊字符（如 <, >），应使用 textContent 或 DOM 方法替代内联插值，防止 XSS；当前示例假设数据已可信。
- 性能优化提示：频繁的 setInterval + 全量重绘（empty() + 逐条 append()）在消息量大时可能卡顿。进阶方案可采用虚拟滚动、增量更新或 DocumentFragment 批量插入。
通过该方法，你无需修改后端结构或增加复杂状态管理，即可用最小代价实现语义清晰、样式可控的双侧消息布局。
