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

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

在 Flask 中，render_template() 函数将变量传递到视图以在 HTML 中使用。但是，如何在同一模板中将数据传递给 JavaScript？

考虑以下示例，其中 Flask 应用程序调用返回字典的 API。目标是将经度和纬度信息传递给 JavaScript，以便与 Google Maps API 一起使用。

<code class="python">from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def get_data():
    events = api.call(get_event, arg0, arg1)
    geocode = event['latitude'], event['longitude']
    return render_template('get_data.html', geocode=geocode)</code>

解决方案

Flask 允许您使用 {{ 变量模板中任何位置的占位符语法，包括 JavaScript 代码中。

要将地理编码数据传递给 JavaScript，只需将其包含在 {{ }} 占位符中即可：

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

这将将 geocode[1] 的值（经度）插入 JavaScript 变量 someJavaScriptVar。

要将数据作为数组传递，可以使用 join() 函数：

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

这将生成以下 JavaScript：

<code class="javascript">var myGeocode = ['value_of_geocode[0]', 'value_of_geocode[1]'];</code>

您还可以在 {{ }} 占位符中使用高级构造，例如 for 循环和 if 语句。更多详细信息请参阅 Jinja2 文档。

此外，您可以使用 tojson 过滤器将 Python 对象转换为 JSON 字符串，可以直接在 JavaScript 中使用：

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

此方法提供一种在模板中将复杂数据结构从 Flask 传递到 JavaScript 的便捷方法。

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