如何將資料從 Flask 傳遞到模板中的 JavaScript 並將其與 Google 地圖一起使用？
- Linda Hamilton原創
- 2024-10-30 13:57:27975瀏覽
將資料從Flask 傳遞到模板中的JavaScript
問題：您想要在JavaScript 程式碼中使用從API 呼叫檢索到的字典在Flask 範本中，特別是將長/緯度元組傳遞到Google Maps API。
解決方案：
要將變數從 Flask 傳遞到模板中的 JavaScript，您可以在其中的任何地方使用 {{variable}} 語法。例如，在 get_data.html 範本中：
<html>
<head>
<script>
var someJavaScriptVar = '{{ geocode[1] }}';
</script>
</head>
<body>
<p>Hello World</p>
<button onclick="alert('Geocode: {{ geocode[0] }} ' + someJavaScriptVar)">Click me</button>
</body>
</html>
這會產生包含 JavaScript 變數賦值的 HTML 輸出。
要將清單傳遞給 JavaScript，您需要建立輸出中的陣列定義：
<html>
<head>
<script>
var myGeocode = ['{{ geocode[0] }}', '{{ geocode[1] }}'];
</script>
</head>
<body>
<p>Hello World</p>
<button onclick="alert('Geocode: ' + myGeocode[0] + ' ' + myGeocode[1])">Click me</button>
</body>
</html>
Jinja2 也支援進階 Python 建構。例如，上面的內容可以縮短為：
<html>
<head>
<script>
var myGeocode = [{{ ', '.join(geocode) }}];
</script>
</head>
<body>
<p>Hello World</p>
<button onclick="alert('Geocode: ' + myGeocode[0] + ' ' + myGeocode[1])" />
</body>
</html>
您也可以利用 Jinja2 過濾器。如果您的字典是 JSON 格式，您可以使用 tojson 過濾器將其轉換為 JavaScript 物件：
<script>
var myGeocode = {{ geocode|tojson }};
</script>以上是如何將資料從 Flask 傳遞到模板中的 JavaScript 並將其與 Google 地圖一起使用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn