极客笔记Flask: 无法将jinja2变量传递到JavaScript片段
在本文中，我们将介绍如何在使用Flask框架时，将jinja2模板引擎中的变量传递到JavaScript代码中的片段中。使用Flask框架进行Web开发时，我们通常会使用jinja2模板引擎来生成动态的HTML页面。然而，有时候我们可能需要将jinja2模板中的变量传递到JavaScript代码中，以便在前端进行进一步的处理和展示。
阅读更多：Flask 教程
问题描述
在使用Flask和jinja2模板引擎的过程中，我们可能会遇到无法直接将jinja2变量传递到JavaScript片段中的问题。例如，我们可能有一个保存在Flask视图函数中的变量，想要在JavaScript代码中使用这个变量进行一些计算或展示。
@app.route('/index')
def index():
variable = 10
return render_template('index.html', variable=variable)
在上面的例子中，我们通过render_template函数将变量variable传递给名为index.html的模板文件。在index.html模板中，我们可以通过{{ variable }}的方式将该变量渲染到HTML代码中。然而，如果我们希望在JavaScript代码中使用该变量，只是简单地在JavaScript代码中使用variable是无法直接获取到该值的。
解决方法
为了能够在JavaScript代码中获取到jinja2变量的值，我们可以通过两种方法来实现。
方法一：在HTML代码中将变量保存为data属性
我们可以将jinja2变量的值保存为HTML元素的data属性。在HTML模板中，我们可以使用如下代码将变量保存为data属性：
<script>
var variable = {{ variable|tojson }};
</script>
在上面的例子中，我们使用{{ variable|tojson }}将jinja2变量的值转化为JSON格式，并将其赋值给JavaScript变量variable。这样，在JavaScript代码中就可以直接使用variable来获取到jinja2变量的值了。
方法二：使用AJAX请求获取变量的值
如果我们在JavaScript代码中需要动态地获取jinja2变量的值，我们可以使用AJAX请求来实现。首先，在HTML模板中创建一个隐藏的元素，将jinja2变量的值保存到该元素的data属性中：
<span id="variable" style="display:none" data-variable="{{ variable }}"></span>
然后，在JavaScript中使用AJAX请求获取到变量的值：
function getVariable() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var variable = JSON.parse(this.responseText);
// 在这里可以使用变量进行后续的处理和展示
}
};
xhttp.open("GET", "/get_variable", true);
xhttp.send();
}
getVariable();
在上面的例子中，我们使用XMLHttpRequest对象发送了一个GET请求到/get_variable路径，该路径对应的Flask视图函数如下：
@app.route('/get_variable')
def get_variable():
variable = 10
return jsonify(variable=variable)
在该视图函数中，我们将变量的值以JSON格式返回给前端。然后，在JavaScript代码中，我们通过JSON.parse(this.responseText)将返回的JSON字符串转化为JavaScript对象，从而获取到了jinja2变量的值。
示例说明
为了更好地理解如何在Flask中将jinja2变量传递到JavaScript片段中，下面我们使用一个示例来演示具体的操作步骤。
首先，我们创建一个名为app.py的文件，并在其中定义一个Flask应用：
from flask import Flask, render_template, jsonify
app = Flask(__name__)
@app.route('/')
def index():
variable = 10
return render_template('index.html', variable=variable)
@app.route('/get_variable')
def get_variable():
variable = 10
return jsonify(variable=variable)
if __name__ == '__main__':
app.run()
然后，我们创建一个名为index.html的模板文件，并在其中将jinja2变量传递到JavaScript中：
<!DOCTYPE html>
<html>
<head>
<title>Flask Example</title>
</head>
<body>
<h1>Welcome to Flask Example</h1>
<script>
// 方法一：将变量保存为data属性
var variable1 = {{ variable|tojson }};
console.log(variable1);
// 方法二：使用AJAX请求获取变量的值
function getVariable() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var variable2 = JSON.parse(this.responseText);
console.log(variable2);
}
};
xhttp.open("GET", "/get_variable", true);
xhttp.send();
}
getVariable();
</script>
</body>
</html>
最后，我们在命令行中运行python app.py启动Flask应用，并通过访问http://localhost:5000来查看结果。在浏览器的开发者控制台中可以看到，我们成功地将jinja2变量传递到了JavaScript中，并在控制台中打印出了变量的值。
总结
在本文中，我们介绍了在Flask框架中无法直接将jinja2变量传递到JavaScript片段中的问题，并提供了两种解决方法。通过将变量保存为HTML元素的data属性或使用AJAX请求获取变量的值，我们可以在JavaScript代码中获取到jinja2变量的值，并进行进一步的处理和展示。这些方法在Flask的Web开发中非常有用，能够让我们更好地利用jinja2模板引擎和JavaScript来构建动态的Web应用程序。