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

Question

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

我可以在没有 JSON 和 JavaScript 的情况下显示信息，但数据不会在整个查找和替换操作中持续显示(而且，每次用户点击时发送 API 请求将非常昂贵)。因此，我尝试将列表传递给 JavaScript var 并将其保留在那里，然后在 HTML 中正确使用和显示。

我的 flask :

@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>