从 Flask+Ajax 动态更新 HTML 图像答案

【问题标题】：Dynamically update HTML images from Flask+Ajax从 Flask+Ajax 动态更新 HTML 图像
【发布时间】：2021-03-23 11:16:48
【问题描述】：

我有一个类似的问题：Flask+AJAX+Jquery+JINJA to dynamically update HTML Table 但无法弄清楚如何将解决方案应用于我的。我需要的是根据使用 AJAX 获得的响应自动更新模板中显示的图像，以便与 Flask 后端进行通信，而无需重新加载它。为此，我开始使用 AJAX（但如果有其他有用的库请告诉我）。

而不是链接问题中的 {{field}} 变量，我在 HTML 中更新了类似的内容（下面的 {{image}} 变量）：

<ul>
{% for image in list%}
  <li>
  <img src="{{image}}" height="150" width="150"></img>
  </li>
{% endfor %}
</ul>

我对 Flask 入口点进行了 AJAX 调用，以获取更新的图像列表以替换原始列表：

$.ajax({
    url: "...", // Flask entrypoint
    type: "POST",
    dataType: 'json',
    data: {...}, // data I need
    success: function(resp){
       // Here the resp var contains the new list of images' path.
       // but I dont't know how to "replace list var with resp"
    }
});

我想做的是获取结果（“resp”）并将其替换为之前的图像，就好像您将 HTML 中的“list”变量替换为新的“resp”变量一样。（“resp”变量可能包含比原始图像更少的图像。）

更新感谢 Pavlo 的回复，我做了这样的事情（工作）：

$.ajax({
            url: "/...",
            type: "POST",
            dataType: 'json',
            data: {...},
            success: function(resp){
                $("ul").children().remove();
                for (var i = 0; i < resp.length; i++) {
                    var elem = "<li><img src=" + resp[i] + "></li>";
                    $("ul").append(elem);
                }
            }
        });

新问题：Ajax返回后的css标签无法正常工作。

【问题讨论】：

您需要用新的替换旧的图像列表标记。你试过吗？
基本上是的，我需要用“resp”替换“list”。但我不知道该怎么做。或者更确切地说，我知道如何在 python 中使用 render_template 函数来做到这一点，但这会重新加载页面。相反，我希望更新是异步的
1.使用浏览器 DOM API 选择目标容器。 2. 清理其内部内容：container.innerHTML = '' 或您喜欢的任何内容。 3. 构建新元素。有几个选项： a) 构建 HTML 字符串并分配给 innerHTML。 b) 创建 DOM 节点并将其附加到容器：container.appendChild(document.createElement('li')).
或者发送html直接替换整个<ul>....$('ul#myListId').html(resp)的内容
所有这些都在 AJAX 成功部分，对吧？无论如何，谢谢！

标签： javascript jquery ajax

【解决方案1】：

这样就完成了任务：

$.ajax({
        url: "/...",
        type: "POST",
        dataType: 'json',
        data: {...},
        success: function(resp){
            $("ul").children().remove();
            for (var i = 0; i < resp.length; i++) {
                var elem = "<li><img src=" + resp[i] + "></li>";
                $("ul").append(elem);
            }
        }
    });

【讨论】：