堆栈内存溢出
  繁体   English   中英

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

[英]How can I pass data from Flask to JavaScript in a template?

 原文  2012-06-24 14:50:39  9   10    javascript/ python/ flask/ jinja2

问题描述

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

10 个解决方案

解决方案1
 168 已采纳  2012-06-24 14:59:00

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

您还可以使用for循环、 if语句等等，更多信息请参见Jinja2 文档。

另外，看看 Ford 的回答，他指出tojson过滤器是Jinja2 的标准过滤器集的补充。

2018 年 11 月编辑： tojson现在包含在 Jinja2 的标准过滤器集中。

解决方案2
 126  2014-04-14 21:58:01

将几乎任何 Python 对象放入 JavaScript 对象的理想方法是使用 JSON。 JSON 作为一种在系统之间传输的格式非常棒，但有时我们会忘记它代表 JavaScript Object Notation。 这意味着将 JSON 注入模板与注入描述对象的 JavaScript 代码相同。

Flask 为此提供了 Jinja 过滤器： tojson将结构转储为 JSON 字符串并将其标记为安全，以便 Jinja 不会自动转义它。

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

这适用于任何 JSON 可序列化的 Python 结构：

python_data = {
    'some_list': [4, 5, 6],
    'nested_dict': {'foo': 7, 'bar': 'a string'}
}

var data = {{ python_data|tojson }};
alert('Data: ' + data.some_list[1] + ' ' + data.nested_dict.foo + 
      ' ' + data.nested_dict.bar);

解决方案3
 35  2017-06-30 07:17:51

在 HTML 元素上使用数据属性可以避免使用内联脚本，这反过来意味着您可以使用更严格的 CSP 规则来提高安全性。

像这样指定数据属性：

<div id="mydiv" data-geocode='{{ geocode|tojson }}'>...</div>

然后在静态 JavaScript 文件中访问它，如下所示：

// Raw JavaScript
var geocode = JSON.parse(document.getElementById("mydiv").dataset.geocode);

// jQuery
var geocode = JSON.parse($("#mydiv").data("geocode"));

解决方案4
 12  2017-05-15 18:21:54

或者，您可以添加一个端点来返回您的变量：

@app.route("/api/geocode")
def geo_code():
    return jsonify(geocode)

然后做一个 XHR 来检索它：

fetch('/api/geocode')
  .then((res)=>{ console.log(res) })

解决方案5
 4  2017-02-10 11:34:45

对于那些想要将变量传递给使用 Flask 获取的脚本的人来说，这只是另一种替代解决方案，我只能通过在外部定义变量然后按如下方式调用脚本来使其工作：

    <script>
    var myfileuri = "/static/my_csv.csv"
    var mytableid = 'mytable';
    </script>
    <script type="text/javascript" src="/static/test123.js"></script>

如果我在test123.js输入 jinja 变量，它不起作用，你会得到一个错误。

解决方案6
 4  2018-07-04 17:30:01

已经给出了工作答案，但我想添加一个检查，在烧瓶变量不可用的情况下作为故障安全。 当您使用：

var myVariable = {{ flaskvar | tojson }};

如果存在导致变量不存在的错误，则由此产生的错误可能会产生意想不到的结果。 为避免这种情况：

{% if flaskvar is defined and flaskvar %}
var myVariable = {{ flaskvar | tojson }};
{% endif %}

解决方案7
 3  2018-12-29 19:05:35

<script>
    const geocodeArr = JSON.parse('{{ geocode | tojson }}');
    console.log(geocodeArr);
</script>

这使用 jinja2 将地理编码元组转换为 json 字符串，然后 javascript JSON.parse将其转换为 javascript 数组。

解决方案8
 0  2019-12-09 05:13:39

好吧，我对这项工作有一个棘手的方法。 思路如下——

在 HTML 正文中制作一些不可见的 HTML 标签，例如<label>, <p>, <input>等，并在标签 id 中制作一个模式，例如，在标签 id 中使用列表索引和在标签类名称中使用列表值。

这里我有两个长度相同的列表 maintenance_next[] 和 maintenance_block_time[] 。 我想使用烧瓶将这两个列表的数据传递给 javascript。 所以我取了一些不可见的标签标签，并将其标签名称设置为列表索引的模式，并将其类名称设置为索引处的值。 

 {% for i in range(maintenance_next|length): %} <label id="maintenance_next_{{i}}" name="{{maintenance_next[i]}}" style="display: none;"></label> <label id="maintenance_block_time_{{i}}" name="{{maintenance_block_time[i]}}" style="display: none;"></label> {% endfor%}

在此之后，我使用一些简单的 javascript 操作在 javascript 中检索数据。 

 <script> var total_len = {{ total_len }}; for (var i = 0; i < total_len; i++) { var tm1 = document.getElementById("maintenance_next_" + i).getAttribute("name"); var tm2 = document.getElementById("maintenance_block_time_" + i).getAttribute("name"); //Do what you need to do with tm1 and tm2. console.log(tm1); console.log(tm2); } </script>

解决方案9
 0  2022-01-26 16:41:33

真棒线程！ 这有很大帮助！ 这是我完成的伪代码：

我的页面.html<\/strong><\/em>

<script>
    var user = {{username}}
</script>

解决方案10
 -1  2017-11-22 04:28:56

有些js文件来自网络或库，不是你自己写的。 他们得到的代码是这样的：

var queryString = document.location.search.substring(1);
var params = PDFViewerApplication.parseQueryString(queryString);
var file = 'file' in params ? params.file : DEFAULT_URL;

该方法使js文件不变（保持独立），并正确传递变量！

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在没有render_template的情况下将数据从flask传递到javascript 如何访问从 Python flask 路由中提供给 HTML 模板的数据？ 如何将字典从javascript传递到flask？ 如何将Flask的JSON传递给Javascript 如何将数据从Flask传递到Javascript？ 如何将数据从 Flask 传递到 JavaScript 如何将Javascript变量数据传递给Template Toolkit？ 在这种特定情况下，如何将数据从Django中的模板传递到Javascript 如何将Json数据从javaScript发送到Flask 如何将数据从 Flask 发送到 JavaScript？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM