如何在模板中将数据从Flask传递到JavaScript？
我的应用程序调用一个返回字典的API。我想将这个dict中的信息传递给视图中的JavaScript。我在JS中特别使用了Google Maps API，所以我想传递给它一个包含long/lat信息的元组列表。我知道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)
共有2个答案
将任何Python对象转化为JavaScript对象的理想方法是使用JSON。JSON作为一种用于系统间传输的格式是很好的，但有时我们会忘记它代表JavaScript对象表示法。这意味着向模板中注入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);
您可以在模板的任何位置使用{{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文档了解更多信息。
另外，看看Ford的回答，他指出了tojson过滤器，它是Jinja2标准过滤器集的一个补充。
编辑2018年11月:tojson现在包含在Jinja2的标准过滤器集中。
-
问题内容： 我的应用程序调用了一个返回字典的API。我想将信息从此字典传递给视图中的JavaScript。具体来说，我在JS中使用Google Maps API，因此我希望向其传递包含长/短信息的元组列表。我知道会将这些变量传递给视图，以便可以在HTML中使用它们，但是如何将它们传递给模板中的JavaScript？ 问题答案： 将几乎所有Python对象都转换为JavaScript对象的理想方法是
-
问题内容： 我知道如何使用jinja模板将数据从python传递到javascript，但是我想将javascript变量传递到python。我想这样做而无需重新加载页面。那可能吗？ 问题答案： 是的，就像monkut所说的那样-我相信您想使用JSON和Javascript / jQuery。 这将允许从客户端到服务器的通讯，然后再返回。 我发现的最适用的示例是在Flask片段/模式中：http
-
问题内容： 我想将两个数据对象传递给Go Template。一个是MongoDB查询结果，另一个是整数数组。 MongoDB查询： 我想通过以下代码发送“结果”和一个int数组 如果只有db结果，我们可以将其用作 在模板中，我们可以访问它{{.Name}}等（其中Name是[] User的结构字段） 请告诉我如何传递这些数据以及如何在模板中访问它们。 问题答案： 你可以仅通过一个单一的值，但该值可
-
问题内容： 我正在为Flask和SQLAlchemy构建管理员，并且我想使用来将用于不同输入的HTML传递给我的视图。模板框架似乎会自动转义html，因此所有<“’>都将转换为html实体。如何禁用它以使HTML正确呈现？ 问题答案： 理想的方法是 而不是完全关闭自动转义。
-
我有使用Springboot和Thymeleaf模板编写的简单Web应用程序。报告控制器从表单接收数据并构建TestPlanReportReportACK对象，该对象作为模型属性添加如下： 我可以在“图表”thymeleaf模板中使用该数据并显示我需要的数据，但我需要在单击按钮时将完全相同的对象发送回控制器，但我得到TestPlanReportACK对象作为设置空值的参数。 以下是我的按钮在图表模
-
问题内容： 我正在为构建管理员，并且我想使用来将用于不同输入的HTML传递给我的视图。模板框架似乎会自动转义，因此所有都将转换为html实体。如何禁用它以使HTML正确呈现？ 问题答案： 理想的方法是 而不是完全关闭自动转义。