如何通过Jinja2将列表从Python传递到JavaScript

一尘不染

python

假设我有一个Python变量：

list_of_items = ['1','2','3','4','5']

然后通过呈现HTML将其传递给Jinja，并且我在JavaScript中还有一个名为的函数somefunction(variable)。我正在尝试通过的每个项目list_of_items。我尝试过这样的事情：

{% for item in list_of_items %}
<span onclick="somefunction({{item}})">{{item}}</span><br>
{% endfor %}

是否可以将列表从Python传递到JavaScript，还是应该逐个循环传递列表中的每个项目？我怎样才能做到这一点？

阅读 155

2020-12-20

共1个答案

一尘不染

要将一些上下文数据传递给javascript代码，您必须对其进行序列化，以使其被javascript（即JSON）“理解”。您还需要使用safeJinja过滤器将其标记为安全，以防止数据被html转义。

您可以通过执行以下操作来实现：

import json

@app.route('/')
def my_view():
    data = [1, 'foo']
    return render_template('index.html', data=json.dumps(data))

<script type="text/javascript">
    function test_func(data) {
        console.log(data);
    }
    test_func({{ data|safe }})
</script>

因此，要完全实现所需的功能（遍历项目列表，并将其传递给javascript函数），您需要分别序列化列表中的每个项目。您的代码将如下所示：

import json

@app.route('/')
def my_view():
    data = [1, "foo"]
    return render_template('index.html', data=map(json.dumps, data))

{% for item in data %}
    <span onclick=someFunction({{ item|safe }});>{{ item }}</span>
{% endfor %}

在我的示例中，我使用Flask，我不知道您使用的是什么框架，但是您知道了，您只需要使其适合所使用的框架即可。

永远不要使用用户提供的数据来执行此操作，而只能使用受信任的数据来执行此操作！

否则，您将使您的应用程序暴露于XSS漏洞！

2020-12-20