如何在沒有Ajax的情況下從Flask返回JSON數據

Question

假設我想使用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
});

蟒蛇：

@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可以使用它。 看起來很爛，但是確實可行。

另外兩個選擇：

1. 用AJAX返回數據。 給定這篇文章的標題，我專門在嘗試避免Ajax。 造成這種情況的主要原因主要是我正在構建一個移動站點，並希望減少返回服務器的ping次數。 我也在考慮（也許從形而上）封裝頁面：一旦擁有了頁面，便擁有了所有頁面。

2. 通過Flask和Jinja渲染我的JS文件。 這看起來簡直讓人不知所措，因為我必須寫一條路由，然后根據與get_display_data_page相同的邏輯來渲染JS：按其ID查找數據，等等。代碼復制和動態JS聽起來像是大文件不，不對我。

是否有已知的方法可以做到這一點？

Answer 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調用，則可見，您只需查看瀏覽器開發人員工具的不同面板即可查看。