首页 > 文章 > 后端开发 > 如何将数据从 Flask 传递到模板中的 JavaScript 并将其与 Google 地图一起使用？

如何将数据从 Flask 传递到模板中的 JavaScript 并将其与 Google 地图一起使用？

Linda Hamilton原创: 2024-10-30 13:57:27973浏览

How to Pass Data from Flask to JavaScript in a Template and Use it with Google Maps?

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

问题：您想要在 JavaScript 代码中使用从 API 调用检索到的字典在 Flask 模板中，特别是将长/纬度元组传递到 Google Maps API。

解决方案：

要将变量从 Flask 传递到模板中的 JavaScript，您可以在其中的任何地方使用 {{variable}} 语法。例如，在 get_data.html 模板中：

<html>
<head>
  <script>
    var someJavaScriptVar = '{{ geocode[1] }}';
  </script>
</head>
<body>
  <p>Hello World</p>
  <button onclick="alert('Geocode: {{ geocode[0] }} ' + someJavaScriptVar)">Click me</button>
</body>
</html>

这会生成包含 JavaScript 变量赋值的 HTML 输出。

要将列表传递给 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])">Click me</button>
  </body>
</html>

Jinja2 还支持高级 Python 构造。例如，上面的内容可以缩短为：

<html>
<head>
  <script>
    var myGeocode = [{{ ', '.join(geocode) }}];
  </script>
</head>
<body>
  <p>Hello World</p>
  <button onclick=&quot;alert('Geocode: ' + myGeocode[0] + ' ' + myGeocode[1])&quot; />
</body>
</html>

您还可以利用 Jinja2 过滤器。如果您的字典是 JSON 格式，您可以使用 tojson 过滤器将其转换为 JavaScript 对象：

<script>
  var myGeocode = {{ geocode|tojson }};
</script>

以上是如何将数据从 Flask 传递到模板中的 JavaScript 并将其与 Google 地图一起使用？的详细内容。更多信息请关注PHP中文网其他相关文章！

Python JavaScript flask json html Array Object if for format Filter this

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：How to Modify X-Axis Date Format for Concise Tick Labels in Matplotlib?下一篇：\"+\" vs. \"extend()\": Which is the Pythonic Way to Concatenate Lists?

查看更多