如何通过 Jinja2 从 Python 传递列表到 JavaScript [英] How to pass a list from Python, by Jinja2 to JavaScript

问题描述

假设我有一个 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>{% 结束为 %}

是否可以将列表从 Python 传递到 JavaScript，还是应该循环传递列表中的每一项?我该怎么做?

解决方案

要将一些上下文数据传递给 javascript 代码，您必须以一种 javascript(即 JSON)理解"的方式对其进行序列化.您还需要使用 safe Jinja 过滤器将其标记为安全，以防止您的数据被 html 转义.

您可以通过执行以下操作来实现此目的:

视图

导入[e-mail]('/')def my_view():数据 = [1, 'foo']return render_template('index.html', data=json.dumps(data))

模板

编辑 - 准确答案

因此，要准确实现您想要的(循环遍历项目列表，并将它们传递给 javascript 函数)，您需要分别序列化列表中的每个项目.您的代码将如下所示:

视图

导入[e-mail]('/')def my_view():数据 = [1, "foo"]return render_template('index.html', data=map(json.dumps, data))

模板

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

编辑 2

在我的示例中，我使用 Flask，我不知道您使用的是什么框架，但是您明白了，您只需要让它适合您使用的框架即可.>

编辑 3(安全警告)

切勿使用用户提供的数据执行此操作，仅使用受信任的数据执行此操作！

否则，您的应用程序将面临 XSS 漏洞！

Let's say I have a Python variable:

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

and I pass it to Jinja by rendering HTML, and I also have a function in JavaScript called somefunction(variable). I am trying to pass each item of list_of_items. I tried something like this:

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

Is it possible to pass a list from Python to JavaScript or should I pass each item from list one by one in a loop? How can I do this?

解决方案

To pass some context data to javascript code, you have to serialize it in a way it will be "understood" by javascript (namely JSON). You also need to mark it as safe using the safe Jinja filter, to prevent your data from being htmlescaped.

You can achieve this by doing something like that:

The view

import json

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

The template

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

Edit - exact answer

So, to achieve exactly what you want (loop over a list of items, and pass them to a javascript function), you'd need to serialize every item in your list separately. Your code would then look like this:

The view

import json

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

The template

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

Edit 2

In my example, I use Flask, I don't know what framework you're using, but you got the idea, you just have to make it fit the framework you use.

Edit 3 (Security warning)

NEVER EVER DO THIS WITH USER-SUPPLIED DATA, ONLY DO THIS WITH TRUSTED DATA!

Otherwise, you would expose your application to XSS vulnerabilities!

这篇关于如何通过 Jinja2 从 Python 传递列表到 JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！