如何使用 Jinja2 將資料從 Flask 傳遞到模板中的 JavaScript？

將資料從Flask 傳遞到範本中的JavaScript

從Flask 應用程式中的API 取得資料時，可能需要傳遞將資料該資訊傳遞給對應模板中的JavaScript。本文探討如何利用 Jinja2 模板的強大功能來實現這一目標。

在 Flask 中，render_template 函數允許我們將變數傳遞給 HTML 模板。但是，要使這些變數在 JavaScript 中可用，需要執行額外的步驟。

Flask 使用的模板引擎 Jinja2 提供的語法可以在模板中嵌入 Python 表達式。這意味著我們可以在模板中的任何位置使用 {{ variable }}，包括在 JavaScript 腳本中。

例如，考慮以下從API 檢索座標的Flask 路由：

<code class="python">@app.route('/')
def get_data():
    events = api.call(get_event, arg0, arg1)
    geocode = event['latitude'], event['longitude']
    return render_template('get_data.html', geocode=geocode)</code>

在對應的範本中，我們可以將geocode 變數傳遞給JavaScript，如下所示：

<code class="html"><script>
var someJavaScriptVar = '{{ geocode[1] }}';
</script></code>

這允許我們在JavaScript 程式碼中以someJavaScriptVar 的形式存取geocode[1] 的值。

或者，要將地理編碼變數作為數組傳遞，我們可以在模板中產生數組定義：

<code class="html"><script>
var myGeocode = ['{{ geocode[0] }}', '{{ geocode[1] }}'];
</script></code>

Jinja2 還支援更高級的構造，例如循環和if 語句，可用於簡化複雜資料結構的生成。

此外，可以使用tojson過濾器將地理編碼元組轉換為JSON字串，使其更適合在JavaScript中使用：

<code class="html"><script>
var myGeocode = {{ geocode | tojson }};
</script></code>

透過這些技術，開發人員可以在Flask 和JavaScript 之間無縫共享數據，從而實現互動式和動態Web 應用程式。

以上是如何使用 Jinja2 將資料從 Flask 傳遞到模板中的 JavaScript？的詳細內容。更多資訊請關注PHP中文網其他相關文章！