如何将数据从Flask传递到模板中的JavaScript？

最新推荐文章于 2023-11-30 13:18:18 发布

以梦为马越骑越傻

最新推荐文章于 2023-11-30 13:18:18 发布

阅读量7.6k

点赞数 9

分类专栏： flask

原文链接：https://codeday.me/bug/20170728/43094.html

版权

flask 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

我的应用程序调用返回字典的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)

最佳答案

您可以在模板中的任意位置使用{{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>

你也可以使用for循环，if语句和更多，更多的Jinja2 documentation。

另外看看ford的答案谁指出tojson过滤器是一个除了Jinja2’s standard set of filters。