如何在模板中將資料從 Flask 傳遞到 JavaScript？

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

在Flask 中，render_template() 函數將變數傳遞到視圖以在HTML中使用。但是，如何在同一模板中將資料傳遞給 JavaScript？

考慮以下範例，其中 Flask 應用程式呼叫傳回字典的 API。目標是將經度和緯度資訊傳遞給 JavaScript，以便與 Google Maps API 一起使用。

<code class="python">from flask import Flask, render_template

app = Flask(__name__)

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

解決方案

Flask 允許您使用 {{ 變數範本中任何位置的佔位符語法，包括 JavaScript 程式碼中。

要將地理編碼資料傳遞給JavaScript，只需包含它在{{ }} 佔位符內：

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

這會將geocode[1]（經度）的值插入到JavaScript 變數someJavaScriptVar 中。

將資料作為陣列傳遞，您可以使用join() 函數：

<code class="html"><script>
  var myGeocode = [{{ ', '.join(geocode) }}];
</script></code>

這將產生以下內容JavaScript:

<code class="javascript">var myGeocode = ['value_of_geocode[0]', 'value_of_geocode[1]'];</code>

您也可以在{ { }} 佔位符中使用高階構造，例如for 迴圈和if 語句。更多詳細資訊請參閱 Jinja2 文件。

此外，您可以使用tojson 過濾器將Python 物件轉換為JSON 字串，可以直接在JavaScript 中使用：

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

此方法提供一種在模板中將複雜數據結構從Flask 傳遞到JavaScript 的便利方法。

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