如何将Python字典数据传递至JavaScript并正常获取？

以下是导致你无法获取数据的常见原因及对应解决方式：

1. 前端未正确调用函数并传入后端变量 #

你仅定义了loadData函数，但没有在页面模板里将后端传递的pb_categories_json变量传入该函数。需要在模板中添加函数调用代码，示例如下：

<script>
    // 将模板中的后端变量传入JS函数
    loadData({{ pb_categories_json|safe }});
</script>

注：多数模板引擎（如Jinja2、Django模板）会自动转义HTML实体，必须添加|safe过滤器，避免JSON字符串被转义后格式失效。

2. JSON字符串的格式冲突与冗余解析 #

后端通过json.dumps生成的JSON本身就是合法的JavaScript对象格式，不需要再用JSON.parse解析，反而可能因为字符串转义问题导致解析失败。可以直接修改JS函数接收对象：

function loadData(pbCategories) {
    // 直接使用对象，无需parse
    console.log("All Called Category:", pbCategories);
}

同时模板中直接传递JSON（配合|safe），这样就能直接拿到完整的对象数据。

3. 模板自动转义导致JSON格式损坏 #

如果模板引擎自动转义了JSON中的特殊字符（比如把双引号转成"），会导致JSON.parse无法识别。此时必须确保后端传递的JSON在模板中以原始格式输出：

• 若使用Jinja2/Django模板：在变量后添加|safe过滤器
• 若后端手动处理：可以用mark_safe（Django）或类似方法标记JSON字符串为安全内容

4. 查看浏览器控制台排查报错 #

打开浏览器开发者工具（F12）的控制台面板，检查是否有SyntaxError等报错。如果JSON.parse报错，说明传入的字符串格式不完整或被篡改，根据报错信息调整模板输出或后端数据处理逻辑。

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