Django 中安全传递 JSON 数据到前端的正确方式

本文讲解如何在 Django 视图中正确序列化 Python 数据为标准 JSON 字符串，并通过 HTML data-* 属性或 json_script 模板过滤器安全传递至前端 JavaScript，避免因单引号、未转义字符导致的 JSON.parse() 失败。

本文讲解如何在 django 视图中正确序列化 python 数据为标准 json 字符串，并通过 html `data-*` 属性或 `json_script` 模板过滤器安全传递至前端 javascript，避免因单引号、未转义字符导致的 `json.parse()` 失败。

在 Django 开发中，常需将后端查询的数据（如用户体重记录）以结构化方式传给前端 JavaScript 进行图表渲染或动态交互。但直接使用 Python 字面量（如 [{...}, {...}]）并插入 HTML data-* 属性中是危险且无效的——它输出的是 Python 的 repr() 字符串（含单引号、无转义），而非符合 RFC 8259 的标准 JSON，因此 JSON.parse() 会立即报错：SyntaxError: expected property name or '}'。

✅ 正确做法：始终使用 json.dumps() 生成合法 JSON 字符串
Django 不提供自动 JSON 序列化逻辑，必须显式调用 Python 标准库的 json.dumps()。它确保：

• 使用双引号包裹键与字符串值；
• 自动转义特殊字符（如换行、引号、反斜杠）；
• 输出 UTF-8 编码的纯文本（默认行为）；
• 支持 separators=(',', ':') 压缩空格（可选优化）。

修改后的视图代码如下：

import json  # 推荐显式 import，更清晰from django.core.paginator import Paginatorfrom django.shortcuts import render, redirectfrom .models import WeightRecord, Profilefrom .forms import WeightLogFormdef profile_page(request):    if request.method == 'POST':        form = WeightLogForm(request.POST)        if form.is_valid():            weight_log = form.save(commit=False)            weight_log.profile = Profile.objects.get(user=request.user)            weight_log.save()            return redirect('profile')    else:        form = WeightLogForm()    user_weight_log = WeightRecord.objects.filter(        profile__user=request.user    ).order_by('-entry_date')    paginator = Paginator(user_weight_log, 10)    page = request.GET.get('page')    try:        user_weight_log = paginator.page(page)    except PageNotAnInteger:        user_weight_log = paginator.page(1)    except EmptyPage:        user_weight_log = paginator.page(paginator.num_pages)    # ✅ 关键修正：用 json.dumps() 生成标准 JSON 字符串    serialized_data = json.dumps([        {            'weight': str(record.weight),            'entry_date': record.entry_date.strftime('%Y-%m-%d')        }        for record in user_weight_log    ])    return render(request, 'profile.html', {        'user_weight_log': user_weight_log,        'form': form,        'weight_data': serialized_data  # 此时已是合法 JSON 字符串    })

对应模板中，仍使用 |safe（因 json.dumps() 输出已为安全字符串，不含 HTML 特殊字符）：

<div id="weight-data" data-weight-data="{{ weight_data|safe }}"></div>

前端 JavaScript 可安全解析：

立即学习“前端免费学习笔记（深入）”；

const weightDataElement = document.getElementById('weight-data');const weightDataJSON = weightDataElement.getAttribute('data-weight-data');const weightData = JSON.parse(weightDataJSON); // ✅ 现在完全合法console.log(weightData); // [{weight: "122.00", entry_date: "2023-09-28"}, ...]

⚠️ 注意事项：

• 永远不要手动拼接 JSON 字符串（如 '{' + ... + '}'），极易引入语法错误；
• 若数据含非 ASCII 字符（如中文），json.dumps() 默认会转义为 uXXXX；如需可读性，可加参数 ensure_ascii=False（但需确保响应编码为 UTF-8）；
• 对于大型数据集，避免在 HTML 中嵌入海量 JSON，考虑改用 API 异步加载（如 fetch('/api/weight-data/')）；
• Django 4.2+ 提供更优方案：|json_script 过滤器（推荐用于复杂/敏感数据）。它将数据写入 <script type="application/json"> 标签，天然规避 HTML 属性转义问题，且支持 XSS 防护：

<!-- 模板中 -->{{ weight_data|json_script:"weight-data" }}

// 前端 JS 中const weightData = JSON.parse(document.getElementById('weight-data').textContent);

该方式无需 |safe，由 Django 自动处理转义与类型安全，是当前 Django 官方推荐的最佳实践。