如何將資料從 Flask 傳遞到模板中的 JavaScript 並將其與 Google 地圖一起使用？-Python教學-PHP中文網

如何將資料從 Flask 傳遞到模板中的 JavaScript 並將其與 Google 地圖一起使用？

Linda Hamilton

發布： 2024-10-30 13:57:27

原創

982 人瀏覽過

How to Pass Data from Flask to JavaScript in a Template and Use it with Google Maps?

將資料從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=&quot;alert('Geocode: ' + myGeocode[0] + ' ' + myGeocode[1])&quot; />
</body>
</html>

登入後複製

您也可以利用 Jinja2 過濾器。如果您的字典是 JSON 格式，您可以使用 tojson 過濾器將其轉換為 JavaScript 物件：

<script>
  var myGeocode = {{ geocode|tojson }};
</script>

登入後複製

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

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

如何將資料從 Flask 傳遞到模板中的 JavaScript 並將其與 Google 地圖一起使用？

將資料從Flask 傳遞到模板中的JavaScript