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

Question

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

我可以在没有 JSON 和 JavaScript 的情况下显示信息，但数据不会在整个查找和替换操作中持续显示（而且，每次用户点击时发送 API 请求会非常昂贵）。因此，我试图将列表传递给 JavaScript var 并将其保存在那里，以便在 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>

当我运行它时，counts 不会显示在页面上的任何位置。因为我没有收到错误（尤其是因为我是 JSON 和 Flask 的新手），所以我发现很难调试。

我的问题是，我怎样才能让list4 持续显示在我的页面上，以便用户可以更改它而无需每次都调用 API？

Answer 1

首先，jsonify 函数将返回一个Response 对象，因此请在您的return 中使用json.dumps(list4)。您也不需要在模板中使用|tojson。

要回答您的问题，要将list4 输出到模板上，只需将{{counts}} 替换为您传递给render_template 的json，即{{ list5 }}。

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

<script>

var counts = {{ list5 }};

</script>