Python 使用jinja将数据发送到Javascript

我有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>

var name={{data}}；
警报（名称）；

我的控制台中的错误是“SyntaxError:意外标记'&'”

---

我知道我以前见过这个问题，但我忘了怎么解决。

没关系，我知道了。我需要用保险箱来逃避密码。例如：

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

var name={{data | safe}}；
警报（名称）；

烧瓶有内置过滤器。因此，我们可以：

烧瓶：

金甲2号：

var data={{data | tojson}}；
控制台日志（数据）；

像这样使用它

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

变量数据=“{invoice.inv_num}}”；

---

只需在数据部分的周围加上引号。

我在尝试将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>
.
.
.

---

因为所有有效的JSON都是有效的JS，所以实际上可以完全跳过

JSON.parse

步骤，只需执行`var data={{data | tojson}}；这样做不仅使代码看起来更安全，还可以将json字符串解析为JS对象。JS对象更等同于python中的dict。当在脚本块中写出JSON对象时（就像执行

var data={{data | tojson}}

时一样），浏览器会将其解释为JavaScript。由于JSON是JavaScript的一个子集，写入脚本块的“JSON”将被浏览器解释为普通JavaScript对象（因为JSON只是数据，这是安全的，而不是将任何用户提供的字符串写入脚本块，这是不安全的）。将“JSON”作为JavaScript字符串传递到

JSON.parse

只是添加了一个额外的不必要步骤。有道理吗？明白了。一个逗号也可以去掉。我有我的答案。旧的是

var data=JSON.parse（{{data|tojson}}}）。谢谢你，@SeanVieira
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)

.
.
.
<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>
.
.
.

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