Question

我有Python代码，我使用jinja将数据发送到Flask中的模板。我可以访问HTML中找到的代码，但是当我尝试在Javascript中显示数据时，它不起作用。例如，这是我的Python代码：

name = "Steve"
return render_template('simple.html',data=json.dumps(name))

在我的simple.html代码中，在html正文中：

<script>
var name = {{ data }};
alert(name);
</script>

我的控制台中的错误显示＆＃34;语法错误：意外的令牌＆＃39;＆amp;＆＃39;＆＃34;

我知道我以前见过这个问题，但我忘记了如何解决这个问题。

Answer 1

没关系，我明白了。我需要使用安全来逃避代码。例如：

<script>
var name = {{ data|safe }};
alert(name);
</script>

Answer 2

Flask有一个内置过滤器tojson。因此我们可以做到：

烧瓶中：

data = {
    "firstname": "Steve", 
    "lastname": "Jobs"
}
return render_template('simple.html', data=data)

的Jinja2：

<script type="text/javascript">
var data = {{ data | tojson }}; 
console.log(data);
</script>

Answer 3

像这样使用它。

<script type="text/javascript">
    var data = '{{ invoice.inv_num }}';
</script>

只需在数据部分加引号即可。

Answer 4

我在尝试将 Python 列表从 Flask 应用程序传递到外部 Javascript 文件（Python/Flask 应用程序 -> HTML -> Javascript）时遇到问题。

这就是我让它工作的方式......

app.py

from flask import Flask, render_template, request, redirect, json

@app.route("/login", methods=["POST"])
def login():

    max = 400

    bar_labels = ['JAN', 'FEB', 'MAR', 'APR',
                  'MAY', 'JUN', 'JUL', 'AUG',
                  'SEP', 'OCT', 'NOV', 'DEC']

    bar_values = [967.67, 1190.89, 1079.75, 1349.19,
                  2328.91, 2504.28, 2873.83, 4764.87,
                  4349.29, 6458.30, 9907, 16297]

    return render_template('profile.html', 
                            labels=json.dumps(bar_labels), 
                            values=json.dumps(bar_values), 
                            headings=headings, data=data)

profile.html

.
.
.
<script type="text/javascript"> window.max = JSON.parse({{ max | tojson }});
                                window.values = JSON.parse({{ values | tojson }});
                                window.labels = JSON.parse({{ labels | tojson }})</script>
<script src="{{url_for('static', filename='main.js')}}"></script>
.
.
.

main.js

window.onload=function(){
    console.log(max)
    console.log(labels)
    console.log(values)
};

使用jinja将数据发送到Javascript

4 个答案: