如何通过Flask模板将Python字典转为JavaScript字典？

嘿，我来帮你搞定这个问题！你现在的写法其实存在潜在的兼容性和安全问题，咱们用Flask模板自带的工具就能完美解决。

为什么直接渲染Python字典会有问题？ #

你当前在模板里写var tp_data = {{text_lists}};，Jinja2会直接输出Python字典的字符串表示，也就是类似{'key1': 10, 'k2': 'hello'}的格式。虽然大部分浏览器的JS引擎能兼容单引号的键，但这不符合JSON规范，如果字典里包含特殊字符（比如引号、换行符），很容易触发JS语法错误。

正确解决方案：使用tojson过滤器 #

Flask的Jinja2模板内置了tojson过滤器，它会自动把Python对象转换成标准的JSON格式——这正好是JavaScript对象字面量的完美匹配，还会自动处理特殊字符转义，安全又省心。

修改后的完整代码示例：

后端代码（flask-server.py）

你的后端代码基本不需要改动，保持原样即可：

from flask import Flask, render_template
import logging

app = Flask(__name__)

@app.route("/app", methods=['GET'])
def home():    
    dict_test = {"key1": 10, "k2": 'hello'}    
    return render_template("index.html", text_lists=dict_test)

logging.info("Listener started")
if __name__ == "__main__":    
    app.run(host='0.0.0.0', port=5000)

前端模板代码（index.html）

只需要在模板变量后加上|tojson过滤器：

<body>    
    <script>        
        // 使用tojson过滤器转换为标准JS对象
        var tp_data = {{ text_lists|tojson }};
        
        // 测试一下：在控制台输出字典内容
        console.log("key1的值：", tp_data.key1); // 输出 10
        console.log("k2的值：", tp_data.k2); // 输出 "hello"
    </script>
    <!-- 页面其他内容 -->
</body>

效果说明 #

使用tojson后，模板渲染出来的JS代码会是标准的对象格式：

var tp_data = {"key1": 10, "k2": "hello"};

这完全符合JavaScript的语法规范，不管字典里有什么特殊字符，都会被正确转义，不会出现语法错误。

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