如何將資料從 Flask 傳遞到 Google Maps API 範本中的 JavaScript？

將資料從Flask 傳遞到範本中的JavaScript

概述

Flask 應用程式需要將資訊從Python 字典傳遞到範本中的JavaScript ，特別是對於Google Maps API。

解決方案

Render_template in Flask 提供了一種將變數傳遞給模板以進行 HTML 渲染的機制。要將此功能擴展到 JavaScript，您可以利用 Jinja 模板引擎。具體方法如下：

1. 在任何地方合併變數： Jinja 變數可以在整個範本中使用，包括 JavaScript 部分。
2. 直接賦值： 使用 {{variable}} 直接指派 JavaScript 變數。例如，您可以將經度指派給JavaScript 變數：

<code class="javascript"><script>
  var longitude = '{{ geocode[1] }}';
</script></code>

3. 產生陣列定義： 如果要將陣列傳遞給JavaScript，請產生它作為陣列定義模板：

<code class="html">  <script>
    var geocode = ['{{ geocode[0] }}', '{{ geocode[1] }}'];
  </script></code>

4. 利用Jinja 構造： Jinja 提供更高級的構造。例如，您可以使用join 過濾器來縮短陣列定義：

<code class="html"><script>
  var geocode = [{{ ', '.join(geocode) }}];
</script></code>

5. 考慮tojson 過濾器： 對於更複雜的資料結構，請使用tojson 過濾器將字典和列表轉換為JSON 字串以供JavaScript 使用：

<code class="html">  <script>
    var geocode = {{ geocode | tojson }};
  </script></code>

以上是如何將資料從 Flask 傳遞到 Google Maps API 範本中的 JavaScript？的詳細內容。更多資訊請關注PHP中文網其他相關文章！