是否可以将 Jinja2 中的变量传递给 Javascript 中的函数而无需在 HTML 中编写

Question

我在课程项目中使用 Flask。static我在和文件夹中有一些 javascript 和 HTML 文件templates，层次结构如下所示：/flask_project-->/run.py-->/templates  -->/index.html-->/js  -->/chart.js有一个函数chart.js可以画图，我需要将一些数据从我的 python 代码传递给这个函数。@app.route('/index')    def index():        data=[1,2,3,4,5,6]        return render_template('index.html',data=data)在我的index.html，我有<script src="{{url_for('static',filename='chart.js')}}"></script>在我的chart.js我有一个功能draw(data){...}我想将我的数据传递给这个函数，但是如果我var data={{data}}在.js文件中添加，它会给我一个错误。.js我知道如果我将代码从文件复制到<scripts></scripts>文件中它会起作用index.html，但它很长并且会使 HTML 文件看起来很难看。那么有什么方法可以将变量直接从 jinja2 传递到 javascript 吗？喜欢调用函数draw({{data}})吗index.html？

Answer 1

我看到两种方式：

a) 通过 Jinja 将数据呈现为数据属性并通过 Javascript 读取它

b) 通过 Javascript 调用您的后端并检索数据；在早期，这是通过 jQuery.ajax() 完成的；现在你可能会使用fetch来自纯 Javascript 的 API

Answer 2

根据Flask 的文档，尝试添加|tojson到您的 Jinja 代码中。

chart.js

var data = {{data|tojson}}
draw(data){...}

我没有尝试运行您的代码，但data如果立即使用此方法无法正常工作，请尝试将端点作为 JSON 发送。