Flask中使用render_template传递JSON数据的技术咨询

1. 能否在Flask路由中加载JSON文件并通过render_template传递到模板？ #

完全可以，你的思路是可行的，只是代码存在一处缩进问题（return语句需与函数内其他代码同级），同时别忘了导入必要的模块。修正后的完整代码如下：

import os
import json
from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def hello_world():
    script_dir = os.path.dirname(__file__)
    rel_path = "roles.json"
    abs_file_path = os.path.join(script_dir, rel_path)

    with open(abs_file_path) as f:
        data = json.load(f)

    return render_template('page.html', data=data)

这段代码会将JSON文件解析为Python字典/列表，再通过render_template传递给模板使用。

2. 能否在page.html的JavaScript中使用该JSON数据？是否有更优实现方案？ #

可以直接在模板的JavaScript中使用这些数据，核心是通过Flask的过滤器将Python对象转换为合法的JSON字符串并注入JS环境。模板中的写法如下：

<script>
// 将Flask传递的Python数据转为JS对象
const jsonData = {{ data|tojson|safe }};
// 正常使用数据
console.log(jsonData);
</script>

其中tojson过滤器负责将Python序列转为JSON字符串，safe过滤器避免Flask转义HTML特殊字符，保证JS语法合法。

更优方案参考：

• 如果JSON数据是静态且体积较小，直接嵌入模板是最优选择——减少一次HTTP请求，页面加载时即可直接使用数据。
• 如果数据体积大、需要动态更新，或要被多个页面复用，可将JSON文件放在静态目录中，通过JS直接读取静态文件，或单独写路由返回JSON再用fetch请求。

3. 直接嵌入模板 vs fetch请求/单独路由返回JSON的差异 #

简单总结：你的方案适合静态、小体积、页面初始化必须的数据；fetch/单独路由方案适合动态更新、接口复用、懒加载的场景。

内容的提问来源于stack exchange，提问作者codebear11