我的应用程序调用返回字典的 API。我想将信息从这个 dict 传递给视图中的 JavaScript。我在 JS 中使用 Google Maps API，特别是，所以我想向它传递一个包含长/纬度信息的元组列表。我知道这render_template会将这些变量传递给视图，以便它们可以在 HTML 中使用，但是如何将它们传递给模板中的 JavaScript？
from flask import Flask
from flask import render_template
app = Flask(__name__)
import foo_api
api = foo_api.API('API KEY')
@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)
您可以{{ variable }}在模板中的任何地方使用，而不仅仅是在 HTML 部分。所以这应该有效：
<html>
<head>
<script>
var someJavaScriptVar = '{{ geocode[1] }}';
</script>
</head>
<body>
<p>Hello World</p>
<button onclick="alert('Geocode: {{ geocode[0] }} ' + someJavaScriptVar)" />
</body>
</html>
把它想象成一个两阶段的过程：首先，Jinja（Flask 使用的模板引擎）生成你的文本输出。这将发送给执行他看到的 JavaScript 的用户。如果您希望 Flask 变量在 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])" />
</body>
</html>
Jinja 还提供了来自 Python 的更高级的构造，因此您可以将其缩短为：
<html>
<head>
<script>
var myGeocode = [{{ ', '.join(geocode) }}];
</script>
</head>
<body>
<p>Hello World</p>
<button onclick="alert('Geocode: ' + myGeocode[0] + ' ' + myGeocode[1])" />
</body>
</html>
您还可以使用for循环、if语句等，更多信息请参见Jinja2 文档。
另外，看看福特的回答，他指出tojson过滤器是Jinja2 标准过滤器集的补充。
2018 年 11 月编辑：tojson现在包含在 Jinja2 的标准过滤器集中。
将几乎任何 Python 对象放入 JavaScript 对象的理想方法是使用 JSON。JSON 作为一种在系统之间传输的格式非常棒，但有时我们会忘记它代表 JavaScript Object Notation。这意味着将 JSON 注入模板与注入描述对象的 JavaScript 代码相同。
Flask 为此提供了 Jinja 过滤器：tojson将结构转储到 JSON 字符串并将其标记为安全，以便 Jinja 不会自动转义它。
<html>
<head>
<script>
var myGeocode = {{ geocode|tojson }};
</script>
</head>
<body>
<p>Hello World</p>
<button onclick="alert('Geocode: ' + myGeocode[0] + ' ' + myGeocode[1])" />
</body>
</html>
这适用于任何 JSON 可序列化的 Python 结构：
python_data = {
'some_list': [4, 5, 6],
'nested_dict': {'foo': 7, 'bar': 'a string'}
}
var data = {{ python_data|tojson }};
alert('Data: ' + data.some_list[1] + ' ' + data.nested_dict.foo +
' ' + data.nested_dict.bar);
在 HTML 元素上使用数据属性可以避免使用内联脚本，这反过来意味着您可以使用更严格的 CSP 规则来提高安全性。
像这样指定一个数据属性：
<div id="mydiv" data-geocode='{{ geocode|tojson }}'>...</div>
然后在静态 JavaScript 文件中访问它，如下所示：
// Raw JavaScript
var geocode = JSON.parse(document.getElementById("mydiv").dataset.geocode);
// jQuery
var geocode = JSON.parse($("#mydiv").data("geocode"));
或者，您可以添加一个端点来返回您的变量：
@app.route("/api/geocode")
def geo_code():
return jsonify(geocode)
然后做一个 XHR 来检索它：
fetch('/api/geocode')
.then((res)=>{ console.log(res) })
已经给出了有效的答案，但我想添加一个检查，在flask变量不可用的情况下作为故障安全。当您使用：
var myVariable = {{ flaskvar | tojson }};
如果存在导致变量不存在的错误，则由此产生的错误可能会产生意想不到的结果。为避免这种情况：
{% if flaskvar is defined and flaskvar %}
var myVariable = {{ flaskvar | tojson }};
{% endif %}