如何通过Jinja2将Python中的列表传递给JavaScript [英] How to pass a list from Python, by Jinja2 to JavaScript

问题描述

假设我有一个Python变量：

Let's say I have a Python variable:

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

我通过渲染HTML将它传递给Jinja，我也是在JavaScript中有一个名为 somefunction（variable）的函数。我正在尝试传递 list_of_items 的每个项目。我试过这样的事情：

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 %}

是否可以将列表从Python传递给JavaScript或我应该在循环中逐个传递列表中的每个项目吗？我该怎么做？

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?

推荐答案

要将一些上下文数据传递给javascript代码，你必须以一种方式将它序列化通过javascript（即JSON）理解。您还需要使用 safe Jinja过滤器将其标记为安全，以防止您的数据被htmlescaped。

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:

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>

编辑 - 确切答案

所以，要实现你想要的东西（循环遍历项目列表，并将它们传递给javascript函数），你需要单独序列化列表中的每个项目。您的代码将如下所示：

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:

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 %}

编辑2

在我的例子中，我使用 Flask ，我不知道你正在使用什么框架，但是你明白了，你只需要做它适合你使用的框架。

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.

从来没有这样做用户提供的数据，只能通过可靠数据进行此操作！

否则，您会将应用程序暴露给XSS漏洞！

Otherwise, you would expose your application to XSS vulnerabilities!

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