我的网页是通过AJAX接收GET请求数组字符串，和一个布尔.
数组中的对象随后显示以形成聊天应用程序，接收到的数组表示要在聊天框中显示的消息。然而，其中一些消息包含媒体。
因此，为了识别其中包含图像源的此类消息，我添加了一个布尔值（media = True：有图像源）。
在我目前的代码中，所有的数组都是在一个空的<img src"">中测试它们的源代码，这会在聊天框中创建一个真正的混乱和未知的图像。我需要能够在一个对象有一个media = True和一个'mediasrc'源代码时，用JS生成一个HTML图像。
AJAX Array in details
超文本：
<div id="display"></div>联森：
<script>
$(document).ready(function() {
setInterval(function() {
$.ajax({
type: 'GET',
url: "/checkview",
success: function go(response) {
console.log(response);
$("#display").empty();
for (var model of response.models_to_return) {
var temp = "<div class='container darker'><b>" +
model.user_id + "</b><p>" +
model.room + "</p><span class='time-left'>" +
model.datetime + "</span><img src=../static/" +
model.mediasrc + ".png></div>";
$("#display").append(temp);
}
},
error: function(response) {
//alert('An error occured')
}
});
}, 1000);
})
</script>顺便说一下，这段代码工作正常，但它实际上是粗暴地强制所有消息尝试填充img：
2条答案
按热度按时间knsnq2tg1#
虽然这是前端框架处理得特别好的事情，但一个常见的约定是拆分模板HTML。例如：
如果要编写符合最新约定的代码，请将双引号替换为反勾号，并使用${var_name}引用变量。
例如：
变成：
juzqafwq2#
我不能100%确定我理解了这个问题，但是您可以创建一个实用函数，该函数接受模型并返回
<img>标记或空字符串，这取决于model.mediasrc是否存在（或任何适合您需要的条件）。这可能不是您需要的确切实现，但它演示了该模式：