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

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

使用 Flask 時，通常需要將資料從後端傳遞到前端以由 JavaScript 進行操作。這可以透過渲染模板來實現。

將資料傳遞給 JavaScript

Flask 使用的 Jinja2 模板引擎允許我們直接在模板中存取 Python 變數。要將變數從Python 傳遞到JavaScript，只需用雙大括號{{ }} 將其括起來：

<code class="html">
  <script>
    var myVariable = '{{ my_python_variable }}';
  </script>
</code>

範例：傳遞地理空間資料

考慮以下場景，我們要傳遞模板中Google Maps API 的地理座標字典：

<code class="python"># Assuming 'events' is a dictionary
geocode = event['latitude'], event['longitude']
return render_template('my_template.html', geocode=geocode)</code>

要在JavaScript 中提供此數據，我們可以使用Jinja2：

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

替代方案：使用tojson 過濾器

Jinja2 提供了一個tojson 過濾器，可以將Python 物件轉換為JSON 字串，可以直接嵌入JavaScript 變數中：

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

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