快捷導(dǎo)航

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

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

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

需求問(wèn)題

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

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

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

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

環(huán)境說(shuō)明

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

示例說(shuō)明

這次示例首先寫(xiě)一個(gè)簡(jiǎn)單的頁(yè)面發(fā)送ajax請(qǐng)求，然后后端分如何返回多行數(shù)據(jù)，如果返回查詢(xún)對(duì)象進(jìn)行示例說(shuō)明。

前端代碼

首先編寫(xiě)一個(gè)簡(jiǎn)單的前端頁(yè)面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 () {
        // 獲取服務(wù)器名稱(chēng)
        var server_name = $('#server_name').val();
        console.log('server_name = ' + server_name);
 
        // 發(fā)送ajax post請(qǐng)求
        $.ajax({
          url: "/assetinfo/test_ajax",
          type: 'POST',
          data: {
            "tag": "search_project",
            "server_name": server_name,
          },
          dataType: "json",
          async: false,
          // 請(qǐng)求成功調(diào)用的函數(shù)
          success: function (data) {
            console.log(data);
          },
          // 請(qǐng)求出錯(cuò)時(shí)調(diào)用的函數(shù)
          error: function () {
            alert("查詢(xún)項(xiàng)目數(shù)據(jù)發(fā)送失敗");
          }
 
        })
      })
    })
  </script>
</head>
<body>
 
<input type="text" id="server_name">
<button id="search_server">提交</button>
 
 
</body>
</html>

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

后臺(tái)直接查詢(xún)服務(wù)器信息，然后返回多條json數(shù)據(jù)

實(shí)現(xiàn)類(lèi)視圖代碼如下：

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頁(yè)面"""
    return render(request,'assetinfo/test_ajax.html')
 
  def post(self,request):
    """接收處理ajax的post請(qǐng)求"""
    servers = ServerInfo.objects.all() # 查詢(xún)服務(wù)器信息
    json_data = serializers.serialize('json', servers) # 將查詢(xún)結(jié)果進(jìn)行json序列化
    return HttpResponse(json_data, content_type="application/json") # 返回json數(shù)據(jù)

在后臺(tái)代碼我沒(méi)有做獲取post請(qǐng)求的參數(shù)，再進(jìn)行的參數(shù)查詢(xún)的操作，這樣只演示如何返回json格式數(shù)據(jù)。

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

瀏覽器測(cè)試功能如下：

可以從瀏覽器的控制臺(tái)看到后端返回過(guò)來(lái)的結(jié)果數(shù)據(jù)。

但是這樣直接返回跟前端沒(méi)有任務(wù)約束是不好的，那么下面來(lái)增加一下與前端交互的格式約束。

前后端約束返回?cái)?shù)據(jù)格式

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

按照這個(gè)約束格式，那么查詢(xún)的結(jié)果應(yīng)該放在data的數(shù)組中。下面來(lái)改后端視圖代碼。

后端按照約束格式返回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頁(yè)面"""
    return render(request,'assetinfo/test_ajax.html')
 
  def post(self,request):
    """接收處理ajax的post請(qǐng)求"""
 
    # 和前端約定的返回格式
    result = {"resCode": '0', "message": 'success',"data": []}
 
    # 查詢(xún)服務(wù)器信息
    servers = ServerInfo.objects.all()
 
    # 序列化為 Python 對(duì)象
    result["data"] = serializers.serialize('python', servers)
 
    return JsonResponse(result)

瀏覽器測(cè)試如下：

這樣子返回前端的話，每條數(shù)據(jù)對(duì)象包含 fields，model，pk三個(gè)對(duì)象，分別代表字段、模型、主鍵，我更想要一個(gè)只包含所有字段的字典對(duì)象。

后端修改每個(gè)model對(duì)象轉(zhuǎn)化為dict字典對(duì)象

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頁(yè)面"""
    return render(request,'assetinfo/test_ajax.html')
 
  def post(self,request):
    """接收處理ajax的post請(qǐng)求"""
 
    # 和前端約定的返回格式
    result = {"resCode": '0', "message": 'success',"data": []}
    # 查詢(xún)服務(wù)器信息
    servers = ServerInfo.objects.all()
 
    # 將model對(duì)象逐個(gè)轉(zhuǎn)為dict字典，然后設(shè)置到data的list中
    for server in servers:
      server = model_to_dict(server) # model對(duì)象轉(zhuǎn)dict字典
      server['server_used_type_id'] = serializers.serialize('python', server['server_used_type_id']) # 外鍵模型對(duì)象需要序列化，或者去除不傳遞
      result["data"].append(server)
 
    return JsonResponse(result)

瀏覽器測(cè)試如下：

可以看到，這樣傳遞給前端就是字典對(duì)象了。

最后，再給出前端js遍歷json格式數(shù)據(jù)的示例。

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

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

瀏覽器顯示如下：

到此這篇關(guān)于Django2.1.7 查詢(xún)數(shù)據(jù)返回json格式的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Django返回json格式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: