Django 2.1.7 查詢數據返回json格式

2019 年 10 月 5 日
筆記

需求問題

在日常工作中，對於前端發送過來的請求，後端django大部分都是採用json格式返回，也有採用模板返回視圖的方式。在模板返回視圖的方式的確很方便，但是如果涉及到動靜分離、ajax請求這類，django就只能返回json格式的數據了。那麼這裡就帶來了一個問題，如何將django從數據庫模型類中查詢的數據以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>

瀏覽器顯示如下：