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

Linda Hamilton
發布: 2024-10-30 13:57:27
原創
1042 人瀏覽過

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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板