如何将数据从 Flask 传递到模板中的 JavaScript？-js教程-PHP中文网

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

Susan Sarandon

发布： 2024-10-31 02:29:29

原创

600 人浏览过

How to Pass Data from Flask to JavaScript in Templates?

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

使用 Flask 时，通常需要将数据从后端传递到前端以由 JavaScript 进行操作。这可以通过渲染模板来实现。

将数据传递给 JavaScript

Flask 使用的 Jinja2 模板引擎允许我们直接在模板中访问 Python 变量。要将变量从 Python 传递到 JavaScript，只需用双大括号 {{ }} 将其括起来：

<code class="html"><head>
  <script>
    var myVariable = '{{ my_python_variable }}';
  </script>
</head></code>

登录后复制

示例：传递地理空间数据

考虑以下场景，我们要传递模板中 Google Maps API 的地理坐标字典：

<code class="python"># Assuming 'events' is a dictionary
geocode = event['latitude'], event['longitude']
return render_template('my_template.html', geocode=geocode)</code>

登录后复制

要在 JavaScript 中提供此数据，我们可以使用 Jinja2：

<code class="html"><head>
  <script>
    var lat = '{{ geocode[0] }}';
    var lng = '{{ geocode[1] }}';
  </script>
</head></code>

登录后复制

替代方案：使用 tojson 过滤器

Jinja2 提供了一个 tojson 过滤器，可以将 Python 对象转换为 JSON 字符串，可以直接嵌入到 JavaScript 变量中：

<code class="html"><script>
  var geocode = {{ geocode|tojson }};
</script></code>

登录后复制

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

php8，我来也

30分钟学会网站布局

尚观Oracle入门到精通视频教程

你的第一行 UNI-APP 代码

Flutter 从头到应用启动

兄弟连Linux新版视频教程

AXURE 9视频教程（适合产品经理交互产品设计UI）

零基础PS视频教程

16天带你入门UI视频教程

PS技巧和切片技巧视频教程

阿里云环境搭建以及项目上线视频教程

计算机网络概述——程序员必须掌握的基础知识

程序员必备教程——HTTP协议讲解

Websocket视频教程

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

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

将数据传递给 JavaScript

示例：传递地理空间数据

替代方案：使用 tojson 过滤器