JavaScript无法解析JSON字符串：Django视图传参至前端问题

我来帮你搞定这个JSON解析的坑！你遇到的问题大概率是Django模板自动转义搞的鬼——当你把序列化后的JSON字符串通过模板传到前端时，Django会自动把JSON里的特殊字符（比如双引号"）转成HTML实体（比如"），导致前端拿到的根本不是有效的JSON格式，自然解析失败。

最简单的解决方案：关闭模板转义 #

在你的index.html里，给jsondata加上|safe过滤器，告诉Django不要转义这个内容：

// 直接在JS里这样写，拿到的就是现成的JS对象数组
var jsonData = {{ jsondata|safe }};

这样处理后，前端拿到的就是原始的JSON结构，甚至不需要再调用JSON.parse()，因为它已经是一个可以直接使用的JavaScript对象数组了。

为什么会出现这个问题？ #

你可以打开浏览器开发者工具查看页面源码，如果看到输出的内容是类似这样的：

var jsonData = [{"model": "posts.feed", "pk": 1, ...}];

那就是转义在作祟——这些"是HTML转义后的双引号，JSON解析器根本不认。

备选方案：用JsonResponse直接返回API（适合纯数据场景） #

如果你的场景不需要同时渲染页面模板，只是需要给前端返回JSON数据，可以直接用Django的JsonResponse：

from django.http import JsonResponse
from django.core import serializers

def feed_api(request):
    results = feed.objects.all()
    # 序列化后转成Python列表，这样JsonResponse可以直接处理
    serialized_data = serializers.serialize('python', results)
    return JsonResponse(serialized_data, safe=False)

然后前端用fetch或者axios请求这个接口：

fetch('/feed-api/')
  .then(response => response.json())
  .then(data => {
    console.log(data);
    // 这里直接拿到解析好的JSON数据
  });

这种方式完全避开了模板转义的问题，适合前后端分离的场景。

验证小技巧 #

修改完代码后，记得在浏览器里查看页面源码，确认输出的JSON字符串里的双引号是正常的"而不是"，这样就说明转义问题解决了。

试试上面的方法，应该就能顺利解析JSON啦！

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