如何将数据从Flask传递到模板中的JavaScript？
我的应用程序调用一个返回字典的API。 我想在这个视图中把这个字典的信息传递给JavaScript。 我在JS中使用Google Maps API，所以我想传递一个带有long / lat信息的元组列表。 我知道render_template将这些variables传递给视图，以便它们可以在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> <body> <p>Hello World</p> <button onclick="alert('Geocode: {{ geocode[0] }} ' + someJavaScriptVar)" /> </body> </html>
把它看作是一个两阶段的过程：首先，Jinja（模板引擎Flask使用）生成你的文本输出。 这发送给执行他看到的JavaScript的用户。 如果您希望Flaskvariables作为数组在JavaScript中可用，则必须在输出中生成一个数组定义：
<html> <head> <script> var myGeocode = ['{{ geocode[0] }}', '{{ geocode[1] }}']; </script> <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> <body> <p>Hello World</p> <button onclick="alert('Geocode: ' + myGeocode[0] + ' ' + myGeocode[1])" /> </body> </html>
你也可以使用for循环， if语句等等，更多的参见Jinja2文档 。
另外看看福特的答案谁指出tojsonfilter是Jinja2的标准filter的补充。
将几乎任何Python对象放入JavaScript对象的理想方法是使用JSON。 JSON是系统间传输的一种格式，但有时候我们会忘记它代表JavaScript Object Notation。 这意味着将JSON注入到模板中与注入描述对象的JavaScript代码相同。
Flask为此提供了一个Jinjafilter： tojson将结构转储为JSONstring，并将其标记为安全的，以便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"));
对于那些想要将variables传递给使用瓶子来源的脚本的人来说，只是另外一种解决scheme，我只能通过定义外部variables然后调用脚本来达到这个效果，如下所示：
<script> var myfileuri = "/static/my_csv.csv" var mytableid = 'mytable'; </script> <script type="text/javascript" src="/static/test123.js"></script>
如果我在test123.jsinputjinjavariables，它不起作用，你会得到一个错误。
或者，您可以添加一个端点来返回您的variables：
@app.route("/api/geocode") def geo_code(): return jsonify(geocode)
然后做一个XHR检索它：
fetch('/api/geocode') .then((res)=>{ console.log(res) })
