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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

回答：

你可以{{ 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>

以上是 如何在模板中将数据从Flask传递到JavaScript？ 的全部内容， 来源链接： utcz.com/qa/433953.html

回到顶部