問題:您想要在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中文網其他相關文章!