我的应用程序调用返回字典的API。我想将信息从此字典传递到视图中的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)Answers:
您可以{{ 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的标准过滤器集中。
json模块以json对象的形式转储数据通常会更容易
将几乎所有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);Uncaught SyntaxError: Unexpected token &JavaScript控制台时，请尝试此操作。
TypeError: Object of type Undefined is not JSON serializable
在HTML元素上使用data属性可以避免使用内联脚本，这反过来意味着您可以使用更严格的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来源的脚本的人来说，这是另一种替代解决方案，我只能通过在外部定义变量，然后按如下所示调用脚本来设法使它起作用：
<script>
var myfileuri = "/static/my_csv.csv"
var mytableid = 'mytable';
</script>
<script type="text/javascript" src="/static/test123.js"></script>如果我在test123.js其中输入jinja变量不起作用，则会收到错误消息。
/static/test123.js），您误解了<script>s src的工作方式。它们不是Flask功能。该浏览器，当解析这样的脚本，使得单独的HTTP请求，以获得脚本。Flask不会将脚本内容烘焙到模板中；实际上，Flask可能在浏览器甚至请求脚本时就已经将模板化的HTML发送到浏览器。
好吧，我有一个棘手的方法来完成这项工作。这个想法如下
<label>, <p>, <input>在HTML主体中制作一些不可见的HTML标记（如etc），并在标记ID中创建模式，例如，在标记ID中使用列表索引，在标记类名称中使用列表值。
在这里，我有两个长度相同的清单maintenance_next []和maintenance_block_time []。我想使用烧瓶将这两个列表的数据传递给javascript。因此，我采取了一些不可见的标签标记并将其标记名称设置为列表索引的模式，并将其类名称设置为index的值。
{% for i in range(maintenance_next|length): %}
<label id="maintenance_next_{{i}}" name="{{maintenance_next[i]}}" style="display: none;"></label>
<label id="maintenance_block_time_{{i}}" name="{{maintenance_block_time[i]}}" style="display: none;"></label>
{% endfor%}之后，我使用一些简单的javascript操作检索javascript中的数据。
<script>
var total_len = {{ total_len }};
for (var i = 0; i < total_len; i++) {
var tm1 = document.getElementById("maintenance_next_" + i).getAttribute("name");
var tm2 = document.getElementById("maintenance_block_time_" + i).getAttribute("name");
//Do what you need to do with tm1 and tm2.
console.log(tm1);
console.log(tm2);
}
</script>