是否可以将 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.jsvar data = {{data|tojson}} draw(data){...}我没有尝试运行您的代码，但data如果立即使用此方法无法正常工作，请尝试将端点作为 JSON 发送。