如何在没有 ajax 的情况下从 Flask 返回 JSON 数据答案

【问题标题】：How to return JSON data from Flask without ajax如何在没有 ajax 的情况下从 Flask 返回 JSON 数据
【发布时间】：2014-02-14 21:40:39
【问题描述】：

假设我想使用 Flask 渲染一个页面（不仅仅是 JSON），其中包含我从数据库中获取的一些特定数据。例如

display_data.html 包括：

<script src='display_data.js'></script>
...
<h1>Data display page!</h1>
<div id="chartContainer"></div>

display_data.js:

$(function() {
     draw_chart($("#chartContainer"), json_data); 
     //draw_chart is defined elsewhere and json_data is what I want to pass in
});

Python：

@app.route('/<data_id>')
def get_display_data_page(data_id):
  data = get_data_by_id(data_id)
  return render_template('display_data.html', data = data)

我认为如果我只想“渲染模板”，我必须在 display_data.html 的其他地方包含以下内容：

<script>window.json_data = {{ data | tojson | safe}}</script>

这种模式很难闻：我在全局命名空间中留下一个对象（以便我的 JS 文件可以访问它），将数据显示为纯文本，并将其中的字符串呈现为解析为 JSON 以便 JS 可以用它。看起来很糟糕，但这确实有效。

另外两个选项：

使用 AJAX 返回数据。鉴于这篇文章的标题，我特别想避免使用 ajax。这样做的原因主要是我正在构建一个移动站点并希望减少返回服务器的 ping 次数。我也在考虑（也许更形而上学地）封装页面：一旦你拥有它，你就拥有了它。
通过 Flask 和 Jinja 渲染我的 JS 文件。这看起来很糟糕，因为我必须写下一条路线并根据我在get_display_data_page 中的相同逻辑渲染 JS：通过其 id 等查找数据。代码重复和动态 JS 声音对我来说就像大禁忌一样。

是否有已知的模式可以很好地做到这一点？

【问题讨论】：

标签： python ajax flask jinja2

【解决方案1】：

如果您不想，则无需将数据保留在全局范围内。在您的模板中，您可以执行以下操作：

<script>
function registerTask(f, args) {
  $(function() {
    f.call(this, args);
  });
}

{% for name, args in js_tasks %}
  registerTask({{name}}, {{ args | tojson | safe }});
{% endfor %}
</script>

然后，在您的 JS 文件中，重新定义 draw_chart 以仅获取数据（或在其周围添加一个包装器，用作您的任务注册表名称）：

function draw_chart_task(data) {
  draw_chart($('#chartContainer'), data);
}

最后，在您的控制器中，只需将数据和任务名称作为元组提供：

return render_template('display_data.html', js_tasks=[('draw_chart_task', data)])

这可确保您的 JavaScript 不只是将其依赖项从全局范围中提取出来，并且您不会进行额外的网络调用。

数据在页面的原始文本输出中可见，但如果您也进行 AJAX 调用，它也是可见的，您只需在浏览器的开发人员工具的不同面板中查看即可。

【讨论】：