如何将数据从Flask传递到模板中的JavaScript？ [英] How can I pass data from Flask to JavaScript in a template?
问题描述
我的应用程序调用返回字典的API。我想在这个视图中把这个字典的信息传递给JavaScript。我在JS中使用Google Maps API，所以我想传递一个带有long / lat信息的元组列表。我知道 render_template 会将这些变量传递给视图，以便在HTML中使用它们，但是如何将它们传递给模板中的JavaScript呢？
from flask import Flask
from flask import render_template
$ b $ app = Flask（__ name__）
$ b 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）
code> {{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的用户。如果你希望你的Flask变量作为一个数组在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>
您也可以对循环使用 另外看看福特的答案谁指出 My app makes a call to an API that returns a dictionary. I want to pass information from this dict to JavaScript in the view. I am using the Google Maps API in the JS, specifically, so I'd like to pass it a list of tuples with the long/lat information. I know that
You can use Think of it as a two-stage process: First, Jinja (the template engine Flask uses) generates your text output. This gets sent to the user who executes the JavaScript he sees. If you want your Flask variable to be available in JavaScript as an array, you have to generate an array definition in your output: Jinja also offers more advanced constructs from Python, so you can shorten it to: You can also use Also have a look at ford's answer who points out the 这篇关于如何将数据从Flask传递到模板中的JavaScript？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！， if 语句等等，请参阅 Jinja2文档为更多。
tojson 过滤器是 Jinja2的标准过滤器集合。render_template will pass these variables to the view so they can be used in HTML, but how could I pass them to JavaScript in the template? 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 }} anywhere in your template, not just in the HTML part. So this should work:<html>
<head>
<script>
var someJavaScriptVar = '{{ geocode[1] }}';
</script>
<body>
<p>Hello World</p>
<button onclick="alert('Geocode: {{ geocode[0] }} ' + someJavaScriptVar)" />
</body>
</html>
<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>
<html>
<head>
<script>
var myGeocode = [{{ ', '.join(geocode) }}];
</script>
<body>
<p>Hello World</p>
<button onclick="alert('Geocode: ' + myGeocode[0] + ' ' + myGeocode[1])" />
</body>
</html>
for loops, if statements and many more, see the Jinja2 documentation for more. tojson filter which is an addition to Jinja2's standard set of filters.
