Django2.1.7 查詢數(shù)據(jù)返回json格式的實現(xiàn)

更新時間：2020年12月29日 09:42:00 作者：海洋的漁夫

這篇文章主要介紹了Django2.1.7 查詢數(shù)據(jù)返回json格式的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

需求問題

在日常工作中，對于前端發(fā)送過來的請求，后端django大部分都是采用json格式返回，也有采用模板返回視圖的方式。

在模板返回視圖的方式的確很方便，但是如果涉及到動靜分離、ajax請求這類，django就只能返回json格式的數(shù)據(jù)了。

那么這里就帶來了一個問題，如何將django從數(shù)據(jù)庫模型類中查詢的數(shù)據(jù)以json格式放回前端。

然后前端如果獲取讀取返回過來的數(shù)據(jù)呢？

環(huán)境說明

前端采用jquery發(fā)送ajax請求
python 3.7.2
django 2.1.7

示例說明

這次示例首先寫一個簡單的頁面發(fā)送ajax請求，然后后端分如何返回多行數(shù)據(jù)，如果返回查詢對象進行示例說明。

前端代碼

首先編寫一個簡單的前端頁面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);
 
        // 發(fā)送ajax post請求
        $.ajax({
          url: "/assetinfo/test_ajax",
          type: 'POST',
          data: {
            "tag": "search_project",
            "server_name": server_name,
          },
          dataType: "json",
          async: false,
          // 請求成功調用的函數(shù)
          success: function (data) {
            console.log(data);
          },
          // 請求出錯時調用的函數(shù)
          error: function () {
            alert("查詢項目數(shù)據(jù)發(fā)送失敗");
          }
 
        })
      })
    })
  </script>
</head>
<body>
 
<input type="text" id="server_name">
<button id="search_server">提交</button>
 
 
</body>
</html>

實現(xiàn)的功能很簡單，只是獲取輸入框的內容，然后點擊提交按鈕發(fā)送一個ajax的post請求即可。

后臺直接查詢服務器信息，然后返回多條json數(shù)據(jù)

實現(xiàn)類視圖代碼如下：

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數(shù)據(jù)

在后臺代碼我沒有做獲取post請求的參數(shù)，再進行的參數(shù)查詢的操作，這樣只演示如何返回json格式數(shù)據(jù)。

其中獲取post請求參數(shù)的方式很簡單，依然是request.POST.get('參數(shù)名')即可。

瀏覽器測試功能如下：

可以從瀏覽器的控制臺看到后端返回過來的結果數(shù)據(jù)。

但是這樣直接返回跟前端沒有任務約束是不好的，那么下面來增加一下與前端交互的格式約束。

前后端約束返回數(shù)據(jù)格式

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

按照這個約束格式，那么查詢的結果應該放在data的數(shù)組中。下面來改后端視圖代碼。

后端按照約束格式返回json數(shù)據(jù)

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)

瀏覽器測試如下：

這樣子返回前端的話，每條數(shù)據(jù)對象包含 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格式數(shù)據(jù)的示例。

前端遍歷返回的json格式數(shù)據(jù)示例

<script>
    $(function () {
      $('#search_server').click(function () {
        ....
 
        // 發(fā)送ajax post請求
        $.ajax({
          url: "/assetinfo/test_ajax",
          type: 'POST',
          data: {
            "tag": "search_project",
            "server_name": server_name,
          },
          dataType: "json",
          async: false,
          // 請求成功調用的函數(shù)
          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']);
            }
          },
          // 請求出錯時調用的函數(shù)
          error: function () {
            alert("查詢項目數(shù)據(jù)發(fā)送失敗");
          }
 
        })
      })
    })
  </script>

瀏覽器顯示如下：