Django视图返回JSON数据后前端无法访问元素的问题排查

你遇到的问题根源在于双重JSON序列化，这导致前端拿到的数据格式不符合预期，进而无法正确访问目标字段。

错误原因拆解 #

1. 后端（views.py）的问题：
   你先用json.dumps()把字典转换成了JSON字符串，接着又将这个字符串传给JsonResponse。但JsonResponse本身的作用就是将传入的Python对象序列化为JSON格式的响应，这就相当于对同一个数据做了两次JSON序列化。最终前端拿到的data_doc_pers['data_doc_pers']是一个被转义过的JSON字符串，而非直接可用的对象。

2. 前端的多余操作：
   jQuery的$.get()方法会自动根据响应的Content-Type头解析JSON数据，所以回调函数里的data_doc_pers已经是解析后的JavaScript对象。但因为后端的双重序列化，你不得不额外调用JSON.parse()，这反而容易引入格式问题。

修正后的代码 #

后端（views.py）

直接将原始字典传给JsonResponse，不需要提前用json.dumps()序列化：

return JsonResponse({
    'data_doc_pers': {
        'type_numeric': type_numeric,
        'type_prop': type_prop,
        'name': name,
        'Vinculo': Vinculo,
        'doc_nome': doc_nome
    }
})

前端（HTML中的JavaScript）

去掉多余的JSON.parse()，直接访问解析后的对象字段：

$.get('{% url "page" %}', {'var': var}, function (data_doc_pers) {
    document.getElementById("text_conf4").innerHTML = data_doc_pers.data_doc_pers.doc_nome;
});

为什么这样能解决问题？ #

• 后端的JsonResponse会自动将嵌套字典序列化为正确的JSON结构，响应的Content-Type会被设为application/json。
• 前端的$.get()会自动识别这个类型并将响应解析为JavaScript对象，你可以直接通过.或[]语法访问里面的字段，无需手动解析。

如果坚持要保留原来的后端写法（不推荐），你需要确保前端解析正确，但这会增加不必要的复杂度，所以更建议采用上面的简化方案。

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