在HTML模板中使用Javascript检索Flask JSON对象

我正在使用Flask构建一个web应用程序，向用户显示信息列表，然后允许他们对列表执行查找和替换类型操作，最后将其导出为csv

我可以在不使用JSON和JavaScript的情况下显示信息，但数据不会在整个查找和替换操作中持续显示（此外，每次用户单击时发送API请求将非常昂贵）。因此，我试图将列表传递给JavaScript变量，并将其保存在那里，以便在HTML中适当地使用和显示它

我的烧瓶：

@app.route("/page", methods=['GET', 'POST'])
def page():

list4 = ["test", "big", "test2"]

return render_template('page.html', title="page", list5=jsonify(list4))

我的模板：

{% extends "layout.html" %}
{% block content %}
<div class="content-section">
</div>
<article class="media content-section">
        <div class="media-body">
          <div class="article-metadata">
            <a class="mr-2" href="#"></a>
            <small class="text-muted"></small>
          </div>
          <h2><a class="article-title" href="#"></a></h2>
          <p class="article-content">{{counts}}</p>
        </div>
</article>

</div>
{% endblock content %}

<script> var counts = {{ list5|tojson }}; </script>

{%extends“layout.html”%}
{%block content%}
{{counts}
{%endblock内容%}
变量计数={list5 | tojson}}；

运行此操作时，

计数

不会显示在页面上的任何位置。因为我没有遇到错误（特别是因为我对JSON和Flask不熟悉），所以我发现调试很困难

我的问题是，如何让

list4

持久地显示在我的页面上，这样用户就可以在每次不调用API的情况下修改它？

首先，函数将返回一个

响应

对象，因此在

返回

中使用

json.dumps（list4）

。您也不需要在模板中使用

| tojson

为了回答您的问题，要将

list4

输出到模板上，只需将

{{counts}}

替换为传递到

render_模板中的json，因此
{{list5}

要将其保存在用于客户端操作的javascript变量中，可以执行相同的操作，并从路由中将javascript变量设置为JSON：

<script>

var counts = {{ list5 }};

</script>


变量计数={{list5}}；
所以如果我刷新页面，它不会每次都调用API？它在本地保存，我可以使用脚本在其上实现查找和替换功能？当您刷新页面时，它会向服务器请求您正在加载的页面。你能详细说明你所说的剧本是什么意思吗？您想使用的是javascript脚本还是python？我想将其保存在HTML模板中，以便使用查找和替换功能对其进行操作。例如，当用户打印出他们的列表时，我希望他们能够从列表中删除字符串。这在Flask中是无法有效完成的，因此我想将列表从Python代码传递到本地保存的Javascript变量（如我在标记底部的第二组代码中所示），这样我就可以操纵它并让它为用户动态更新列表。因此，虽然您允许我打印列表，但我仍然无法将其转换为Javascript。谢谢。我知道了，我已经更新了我的答案，但基本上你已经更新了！谢谢你，迪伦，我会接受你的回答。我想我的问题是我写的标签超出了它们的适当范围。感谢您提供json转储信息，它正在工作。