如何将数据从 Flask 传递到模板中的 JavaScript？-js教程-PHP中文网

如何将数据从 Flask 传递到模板中的 JavaScript？

Susan Sarandon

发布： 2024-10-31 02:29:29

原创

695 人浏览过

How to Pass Data from Flask to JavaScript in Templates?

将数据从 Flask 传递到模板中的 JavaScript

使用 Flask 时，通常需要将数据从后端传递到前端以由 JavaScript 进行操作。这可以通过渲染模板来实现。

将数据传递给 JavaScript

Flask 使用的 Jinja2 模板引擎允许我们直接在模板中访问 Python 变量。要将变量从 Python 传递到 JavaScript，只需用双大括号 {{ }} 将其括起来：

<code class="html"><head>
  <script>
    var myVariable = '{{ my_python_variable }}';
  </script>
</head></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"><head>
  <script>
    var lat = '{{ geocode[0] }}';
    var lng = '{{ geocode[1] }}';
  </script>
</head></code>

登录后复制

替代方案：使用 tojson 过滤器

Jinja2 提供了一个 tojson 过滤器，可以将 Python 对象转换为 JSON 字符串，可以直接嵌入到 JavaScript 变量中：

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

登录后复制

以上是如何将数据从 Flask 传递到模板中的 JavaScript？的详细内容。更多信息请关注PHP中文网其他相关文章！