html如何读取render_template传回的字典数据
时间: 2024-10-08 17:15:58 浏览: 12
在HTML模板中读取由Flask的`render_template`函数返回的字典数据,你需要在HTML模板中使用 Jinja2 模板引擎的变量绑定功能。首先,在Flask视图函数中,你需要将字典转换为可以传递给模板的形式,通常是JSON格式,然后渲染模板:
```python
from flask import Flask, render_template, jsonify
app = Flask(__name__)
@app.route('/')
def home():
# 假设你有一个名为data的字典
data = {
'key1': 'value1',
'key2': 'value2',
'key3': 'value3'
}
# 将字典转换为JSON字符串并返回
response = jsonify(data)
response.headers["Content-Type"] = "application/json" # 设置响应头,告诉浏览器这是一个JSON
return response
# 接下来在templates目录下的home.html文件中:
<!-- home.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
</head>
<body>
<script>
window.onload = function() {
// 使用fetch等现代API获取JSON数据,也可以直接使用jQuery的$.getJSON
fetch('/', { method: 'GET' })
.then(response => response.json())
.then(data => {
for (let item in data) {
document.getElementById('content').innerHTML += `<p>${item}: ${data[item]}</p>`;
}
});
};
</script>
<div id="content"></div>
</body>
</html>
```
在上述代码中,`window.onload`事件会在页面加载完成后触发,它会获取根URL(也就是`/`),并从服务器获取JSON数据。然后在客户端,使用这些数据填充到id为`content`的元素中。