Django 2.1.7 实现查询数据返回 JSON 格式详解

小石头

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

原创

本文介绍在 Django 2.1.7 环境下，如何通过 AJAX 请求将数据库查询结果以 JSON 格式返回给前端。内容涵盖环境配置、后端视图编写、数据序列化方法（serializers.serialize 与 model_to_dict），以及前端 jQuery 对返回数据的解析与遍历，旨在解决动静分离场景下的数据交互问题。

需求问题

在日常开发中，后端 Django 处理前端请求时，除了使用模板渲染视图外，更常见的做法是直接返回 JSON 格式数据。

虽然模板渲染视图操作便捷，但在涉及动静分离架构或处理 AJAX 异步请求的场景下，Django 必须返回 JSON 格式的数据以满足前端需求。

这就引出一个核心问题：如何将 Django 数据库模型类中查询到的数据转换为 JSON 格式并返回给前端。

此外，前端应如何获取并解析后端返回的 JSON 数据？

环境说明

前端使用 jQuery 发送 AJAX 请求。
Python 版本为 3.7.2。
Django 版本为 2.1.7。

示例说明

本示例首先构建一个简单的页面来发送 AJAX 请求，随后后端将演示如何返回多行数据，以及如何返回查询对象。

前端代码

首先编写一个简单的前端页面test_ajax.html，具体代码如下：


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/static/js/jquery-3.0.0.min.js"></script>
  <script>
    $(function () {
      $('#search_server').click(function () {
        // 获取服务器名称
        var server_name = $('#server_name').val();
        console.log('server_name = ' + server_name);
 
        // 发送ajax post请求
        $.ajax({
          url: "/assetinfo/test_ajax",
          type: 'POST',
          data: {
            "tag": "search_project",
            "server_name": server_name,
          },
          dataType: "json",
          async: false,
          // 请求成功调用的函数
          success: function (data) {
            console.log(data);
          },
          // 请求出错时调用的函数
          error: function () {
            alert("查询项目数据发送失败");
          }
 
        })
      })
    })
  </script>
</head>
<body>
 
<input type="text" id="server_name">
<button id="search_server">提交</button>
 
 
</body>
</html>

该页面功能简单，主要获取输入框内容，并在点击提交按钮时发送一个 AJAX POST 请求。

后台直接查询服务器信息，并返回多条 JSON 数据。

实现类视图的代码如下：


from django.core import serializers
from django.http import HttpResponse
from assetinfo.models import ServerInfo
 
# ex: /assetinfo/test_ajax
class TestAjax(View):
 
  def get(self,request):
    """显示html页面"""
    return render(request,'assetinfo/test_ajax.html')
 
  def post(self,request):
    """接收处理ajax的post请求"""
    servers = ServerInfo.objects.all() # 查询服务器信息
    json_data = serializers.serialize('json', servers) # 将查询结果进行json序列化
    return HttpResponse(json_data, content_type="application/json") # 返回json数据

在后台代码中，此处未演示获取 POST 请求参数并进行参数查询的操作，仅专注于演示如何返回 JSON 格式数据。

若需获取 POST 请求参数，可通过request.POST.get('参数名')轻松实现。

浏览器测试功能如下：

通过浏览器控制台可以查看后端返回的结果数据。

然而，直接返回数据且未与前端约定格式并非最佳实践，因此下面将增加前后端交互的格式约束。

前后端约束返回数据格式


 {"resCode": '0', "message": 'success',"data": []}

按照约定的格式，查询结果应放置在data数组中。接下来修改后端视图代码以符合该约束。

后端按照约束格式返回 JSON 数据。


from django.core import serializers
from django.http.response import JsonResponse
from assetinfo.models import ServerInfo
 
# ex: /assetinfo/test_ajax
class TestAjax(View):
 
  def get(self,request):
    """显示html页面"""
    return render(request,'assetinfo/test_ajax.html')
 
  def post(self,request):
    """接收处理ajax的post请求"""
 
    # 和前端约定的返回格式
    result = {"resCode": '0', "message": 'success',"data": []}
 
    # 查询服务器信息
    servers = ServerInfo.objects.all()
 
    # 序列化为 Python 对象
    result["data"] = serializers.serialize('python', servers)
 
    return JsonResponse(result)

浏览器测试如下：

此时返回前端的每条数据对象包含 fields、model、pk 三个字段，分别代表字段信息、模型名称及主键。但通常更希望获得一个仅包含所有字段值的字典对象。

后端修改每个 model 对象转化为 dict 字典对象。


from django.core import serializers
from django.http.response import JsonResponse
from django.forms.models import model_to_dict
 
# ex: /assetinfo/test_ajax
class TestAjax(View):
 
  def get(self,request):
    """显示html页面"""
    return render(request,'assetinfo/test_ajax.html')
 
  def post(self,request):
    """接收处理ajax的post请求"""
 
    # 和前端约定的返回格式
    result = {"resCode": '0', "message": 'success',"data": []}
    # 查询服务器信息
    servers = ServerInfo.objects.all()
 
    # 将model对象逐个转为dict字典，然后设置到data的list中
    for server in servers:
      server = model_to_dict(server) # model对象转dict字典
      server['server_used_type_id'] = serializers.serialize('python', server['server_used_type_id']) # 外键模型对象需要序列化，或者去除不传递
      result["data"].append(server)
 
    return JsonResponse(result)

浏览器测试如下：

可以看到，这样传递给前端的数据即为字典对象。

最后，提供前端 JS 遍历 JSON 格式数据的示例。

前端遍历返回的 json 格式数据示例


<script>
    $(function () {
      $('#search_server').click(function () {
        ....
 
        // 发送ajax post请求
        $.ajax({
          url: "/assetinfo/test_ajax",
          type: 'POST',
          data: {
            "tag": "search_project",
            "server_name": server_name,
          },
          dataType: "json",
          async: false,
          // 请求成功调用的函数
          success: function (res) {
            {#console.log(res.data);#}
            // 遍历data信息
            for(var i=0;i<res.data.length;i++){
              console.log(res.data[i]);
              console.log(res.data[i]['server_hostname']);
              console.log(res.data[i]['server_internet_ip']);
              console.log(res.data[i]['server_intranet_ip']);
            }
          },
          // 请求出错时调用的函数
          error: function () {
            alert("查询项目数据发送失败");
          }
 
        })
      })
    })
  </script>

浏览器显示如下：