如何將資料從 Flask 應用程式傳遞到視圖模板中的 JavaScript，以便在 Google Maps API 等 JavaScript 程式庫中使用？
- Susan Sarandon原創
- 2024-10-27 08:07:30143瀏覽
將資料從Flask 傳遞到範本中的JavaScript
使用Flask 應用程式時，您可能會遇到需要從Flask 傳遞資料的情況視圖範本中JavaScript 的Python 字典。這些資料可以在 JavaScript 庫中使用，例如 Google 地圖 API。本文將引導您完成將資料從 Flask 有效傳遞到 JavaScript 的過程。
要將這些變數傳遞給 JavaScript，您可以利用 Flask 的 render_template 功能。 Jinja2，Flask 的模板引擎，可讓您使用 {{variable}} 語法存取資料變數。這意味著您只需在模板中的適當位置使用 {{variable }} 即可將 Python 字典資料傳遞到 JavaScript 腳本。
例如，讓我們考慮以下範例：
<code class="python">from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def get_data():
events = {'latitude': 40.7128, 'longitude': -74.0059}
geocode = events['latitude'], events['longitude']
return render_template('get_data.html', geocode=geocode)</code>
在此範例中，我們有一個名為「events」的 Python 字典，其中包含緯度和經度資訊。我們將這些資料提取到一個名為「地理代碼」的元組中。 render_template 函數允許我們將「geocode」變數傳遞給「get_data.html」模板。
現在，在您的 HTML 範本中，您可以使用 Jinja2 的語法存取資料。以下是將其合併到 JavaScript 腳本中的方法：
<code class="html"><head>
<script>
var geocode = '{{ geocode[1] }}';
</script>
</head></code>
此程式碼會將經度值指派給 JavaScript 中的地理編碼變數。
或者，您可以將「地理編碼」表示為透過在範本輸出中產生陣列定義，在JavaScript 中建立陣列：
<code class="html"><head>
<script>
var myGeocode = ['{{ geocode[0] }}', '{{ geocode[1] }}'];
</script>
</head></code>
此方法建立一個可以透過JavaScript 邏輯輕鬆存取和操作的陣列。
Jinja2 提供了全面的集合允許您操作和自訂輸出的構造。例如，您可以使用 for 迴圈來縮短前面的範例：
<code class="html"><head>
<script>
var myGeocode = [{% for value in geocode %}{{ value }}, {% endfor %}];
</script>
</head></code>
Jinja2 的 tojson 過濾器也可用於將 Python 物件轉換為 JavaScript 物件表示法 (JSON) 字串。
<code class="html"><head>
<script>
var myGeocode = {{ geocode | tojson }};
</script>
</head></code>
透過採用這些技術，您可以有效地將資料從 Flask 傳遞到 JavaScript，從而實現 Python 和 JavaScript 元件之間的無縫通訊。
以上是如何將資料從 Flask 應用程式傳遞到視圖模板中的 JavaScript，以便在 Google Maps API 等 JavaScript 程式庫中使用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！