从Python向JS传递JSON时出现ReferenceError问题求助

核心问题1：Python端变量名不匹配 #

你的辅助函数返回的是test_dictionary和js_test_dictionary，但调用render_template时传递的是js_dictionary=js_dictionary——这里的js_dictionary并未定义，辅助函数返回的对应变量是js_test_dictionary，导致模板接收不到该变量，前端自然会报ReferenceError。

修复代码： #

先接收辅助函数的返回值，再传递正确变量到模板：

# 替换your_helper_function为实际的辅助函数名
test_dict, js_test_dict = your_helper_function(...)
return render_template("study.html", language=selected, dictionary=dictionary, js_dictionary=js_test_dict)

核心问题2：前端模板变量引用错误 #

前端代码里的${js_dictionary}是JS模板字符串语法，但js_dictionary是jinja2模板变量，必须用jinja2的{{ }}语法注入，否则JS会将其视为未定义的本地变量。

两种修复方案： #

方案1：直接注入为JS对象（更高效）

json.dumps已生成合法JSON字符串，可直接注入JS作为对象使用，无需JSON.parse：

document.addEventListener('DOMContentLoaded', function() {
    const translations = {{ js_dictionary }};
    document.querySelector('#check').onclick = function() {
        // 直接使用translations对象
    }
});

方案2：注入字符串后解析（适合需字符串处理的场景）

若要先获取字符串再解析，需用引号包裹注入的模板变量，jinja2会自动转义特殊字符：

document.addEventListener('DOMContentLoaded', function() {
    const dictionaryStr = "{{ js_dictionary }}";
    const translations = JSON.parse(dictionaryStr);
    document.querySelector('#check').onclick = function() {
        // 使用translations对象
    }
});

额外注意点 #

• 可在Python端打印js_test_dictionary，确认json.dumps生成的JSON格式是否符合预期。
• 若字典包含引号、换行等特殊字符，jinja2的{{ }}会自动转义，无需额外处理。

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