Django一对多查询结果序列化与前端Ajax展示

Aria

发布时间：2026-10-13| 4人浏览过

原创

本文详解在Django中如何处理一对多模型查询结果，解决QuerySet无法直接序列化的问题。通过遍历对象转换为字典列表，利用JsonResponse的safe=False参数实现后端数据输出，并结合前端jQuery Ajax接收数据，动态渲染HTML列表展示学生信息。

Django一对多模型关系与数据查询

以一对多的数据表关系为例，学生属于“多”的一方，老师属于“一”的一方。在模型定义中，外键字段允许为空（null=True），这意味着即使关联的老师记录被删除，对应的学生记录依然保留，只是外键字段值变为空。


class Teacher(models.Model):
  name = models.CharField(max_length=10,verbose_name='老师名称')
  password = models.CharField(max_length=10,verbose_name='密码')
  class Meta:
    verbose_name_plural = '教师表'
  def __str__(self):
    return self.name
class Student(models.Model):
  teacher = models.ForeignKey(to=Teacher,on_delete=models.SET_NULL,null=True,verbose_name='教师')
  name = models.CharField(max_length=10,verbose_name='学生名字')
  age = models.IntegerField(verbose_name='年龄')
  class Meta:
    verbose_name_plural = '学生表'
  def __str__(self):
    return self.name

获取特定老师及其名下学生的代码如下： ``` teacher = models.Teacher.objects.get(pk=id) # 获取id对应的老师对象 students = teacher.student_set.all() # 利用反向关系查询该老师下的所有学生 ```

执行上述代码后，all()方法返回的是一个QuerySet结果集，示例输出如下：<QuerySet [<Student: 学生1>, <Student: 学生22>, <Student: 3>, <Student: 44>]>。

若需将该结果集通过Ajax传递给前端，通常需要转换为JSON格式。然而，Django默认的json.dumps或直接返回QuerySet会引发错误，因为QuerySet对象无法直接被标准JSON序列化器处理。

解决思路是先将QuerySet转换为列表嵌套字典的结构，再对其进行序列化操作，从而生成前端可解析的数据格式。

后端数据序列化与JSON响应处理


def index(request):
  if request.method == "GET":
    teacher_name = request.session.get('name')
    teacher = models.Teacher.objects.get(name=teacher_name)
    students = teacher.student_set.all()
    print(students)
    list = []
    for i in students:
      json_dict = {}
      json_dict['name'] = i.name
      json_dict['age'] = i.age
      list.append(json_dict)
    return JsonResponse(list,safe=False)  # 这里safe默认为True，只接受参数为dict字典类型，非dict类型---“报错：In order to allow non-dict objects to be serialized set the safe parameter to False.” safe=False之后list列表, tuple元祖, set集合就都可以

前端通过Ajax接收后端返回的参数，并使用循环遍历当前传递过来的列表数据，以便进行后续处理。

前端Ajax交互与动态渲染实现


$('#submit2').click(function(){
      $.ajax({
        url:'/app1/index/',
        type:'GET',
        success:function(res){
          console.log(res)
          var str = ''
          for(var i = 0; i < res.length; i++){     # js中的for循环
            str += '<li>' + res[i]['name'] + '</li>'
            }
            $('#students').html(str)          
        }
      })      

    })

最终的前端渲染效果如图所示，数据成功展示在页面上。