Django框架下AJAX请求返回JSON显示undefined问题排查

• 你的booking_detail_lists视图对所有请求统一返回渲染后的HTML页面：调用render()返回的是booking_detail.html模板渲染后的完整HTML字符串，AJAX请求拿到的响应内容是HTML，自然不存在data属性，所以console.log(data.data)输出undefined。
• 模板中直接写{{data}}能正常展示，走的是服务端渲染逻辑：是视图首次渲染页面时，把上下文里预存的json_data字符串直接输出到了模板中，和后续发起的AJAX请求没有关联。
• 额外逻辑错误：就算接口返回正确的JSON结构，你也没有在响应外层封装data字段，直接访问data.data本身也取不到值。

1. 修改视图函数，区分普通页面请求和AJAX请求 #

将视图调整为：普通请求返回渲染后的页面，AJAX请求返回纯JSON响应，不需要手动调用json.dumps，直接用Django自带的JsonResponse即可：

from django.http import JsonResponse

@login_required
def booking_detail_lists(request,id):
    obj = get_object_or_404(Booking.objects.annotate(no_persons=Count('takes_by')),id=id)
    bookingvisitors = BookingVisitor.objects.filter(booking=obj) 
    doc = Document.objects.filter(booking=obj)
    documents = []
    for i in doc:
        documents.append({
            'source':i.docs.url
        })
    visitors = []
    for i in bookingvisitors:
        visitors.append({
           'full_name':i.visitor.full_name,
           'reason':i.reason,
           'check_in_vis':i.check_in_vis.strftime("%Y-%m-%dT%H:%M"),
           'check_out_vis':i.check_out_vis.strftime("%Y-%m-%dT%H:%M"),
           'admin':i.admin.username,
           'date':i.date.strftime("%Y-%m-%dT%H:%M")
    })
    data = {
        'check_in':obj.check_in.strftime("%Y-%m-%dT%H:%M"),
        'check_out':obj.check_out.strftime("%Y-%m-%dT%H:%M"),
        'taker':obj.taker,
        'phone':obj.phone,
        'no_person':obj.no_persons,
        'id':obj.id,
        'takes_by':visitors,
        'images':documents,
    } 
    # 判断是否为AJAX请求
    if request.headers.get('x-requested-with') == 'XMLHttpRequest':
        # 直接返回JSON响应
        return JsonResponse(data)
    # 普通页面请求走原来的渲染逻辑
    json_data = json.dumps(data)
    return render(request,'booking/booking_detail.html',{'data':json_data,'obj':obj,'id':obj.id})

2. 修改AJAX请求代码 #

加上dataType: 'json'指定响应类型，同时调整成功回调的取值逻辑，不需要再加一层.data：

$.ajax({
    type:'GET',
    url:"{%url 'booking:booking_detail_lists' id=2222 %}".replace(/2222/,parseInt({{id}})),
    dataType: 'json', // 新增：指定响应为JSON格式，jQuery会自动解析为JS对象
    success:function(data){
        console.log(data) // 直接打印data即可，不需要访问data.data
        // 后续可以直接取用data里的字段，比如data.check_in、data.takes_by等
    }
})

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