时间戳

首页 > 解决方案 > 在 HTML 模板中使用 Javascript 检索 Flask JSON 对象

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

问题描述

我正在使用 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 调用？

标签： javascriptpythonhtmljsonflask

解决方案

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

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

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

<script>

var counts = {{ list5 }};

</script>

推荐阅读