本文详解 Django 中将 Python 字典序列化为 JSON 并在前端 JavaScript 中正确解析的完整流程，重点解决因 HTML 属性引号嵌套导致的 JSON.parse() 语法错误问题。
本文详解 django 中将 python 字典序列化为 json 并在前端 javascript 中正确解析的完整流程，重点解决因 html 属性引号嵌套导致的 `json.parse()` 语法错误问题。
在 Django 项目中（例如单词搜索游戏），常需将后端字典数据（如单词释义）传递给前端 JavaScript 进行实时校验。常见做法是：在视图中使用 json.dumps() 序列化字典，并通过模板上下文传入 HTML；再借助 data-* 属性嵌入 DOM，最后由 JS 读取并解析。但若处理不当，极易触发 SyntaxError: Expected property name or '}' —— 这通常并非 JSON 本身非法，而是 HTML 属性值因引号冲突被浏览器错误解析所致。
? 问题根源：HTML 属性引号嵌套冲突
原始代码中，data-words 的值被双引号包裹，而 JSON 内部也使用双引号，导致 HTML 解析器提前截断：
<!-- ❌ 错误写法：外层双引号 + 内层双引号 → 解析失败 -->
<div id="wordDefinitions" data-words="{" aardvark></div>
浏览器将 data-words="{" 视为属性起始，遇到第二个 " 即认为属性结束，后续内容被当作无效 HTML 处理，最终 JS 获取到的是被截断、格式损坏的字符串，自然无法 JSON.parse()。
✅ 正确方案：统一使用单引号包裹属性值
只需将 data-words 的外层引号改为单引号，即可让 JSON 内部双引号被原样保留：
<!-- ✅ 正确写法：外层单引号，内层双引号合法 -->
<div id="wordDefinitions" data-words='{"aardvark": "n. mammal with a tubular snout and a long tongue, feeding on termites. [afrikaans]\n"}'></div>
对应 JavaScript 解析逻辑保持不变，且更健壮：
Java Linux版下载入口，提供 Oracle JDK 26.0.2 官方 Linux 安装包、Java 环境配置、JDBC 数据库连接和 Java 服务端开发相关信息。
function submit_word() {
const element = document.getElementById('wordDefinitions');
const jsonStr = element.getAttribute('data-words');
try {
const wordDic = JSON.parse(jsonStr);
console.log(wordDic.aardvark); // ✅ 正常输出释义
return wordDic;
} catch (e) {
console.error('JSON 解析失败:', e.message, '原始字符串:', jsonStr);
throw e;
}
}
⚠️ 进阶注意事项
-
Django 模板中务必转义：直接 {{ words_json }} 可能引入 XSS 风险或引号污染。推荐使用 |json_script 过滤器（Django 3.1+），它会自动选择合适引号并转义特殊字符：
{{ words_json|json_script:"word-dict-data" }}然后在 JS 中安全读取：
const wordDic = JSON.parse(document.getElementById('word-dict-data').textContent); -
避免手动拼接 JSON 字符串：永远不要用 str(dict) 或字符串格式化生成 JSON，必须使用 json.dumps()，并确保 ensure_ascii=False（支持中文等 Unicode）：
# views.py import json context['words_json'] = json.dumps(word_dict, ensure_ascii=False)
空格与换行处理：JSON 中的 \n 在 HTML 属性中会被规范化为空格，若释义含换行需在 JS 中额外处理，或改用 <script type="application/json"> 块存放数据。</script>
✅ 总结
核心原则只有一条：HTML 属性值的外层引号，必须与 JSON 内部引号类型错开。优先选用单引号包裹 data-* 属性，配合 json.dumps() 生成标准 JSON 字符串，即可一劳永逸规避解析错误。对于生产环境，强烈推荐 |json_script 过滤器——它既安全又无需手动管理引号，是 Django 官方推荐的最佳实践。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
