Django2.1.7 查询数据返回json格式的实现


Posted in Python onDecember 29, 2020

需求问题

在日常工作中,对于前端发送过来的请求,后端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('参数名')即可。

浏览器测试功能如下:

Django2.1.7 查询数据返回json格式的实现

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

但是这样直接返回跟前端没有任务约束是不好的,那么下面来增加一下与前端交互的格式约束。

前后端约束返回数据格式

{"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)

浏览器测试如下:

Django2.1.7 查询数据返回json格式的实现

这样子返回前端的话,每条数据对象包含 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)

浏览器测试如下:

Django2.1.7 查询数据返回json格式的实现

可以看到,这样传递给前端就是字典对象了。

最后,再给出前端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>

浏览器显示如下:

Django2.1.7 查询数据返回json格式的实现

到此这篇关于Django2.1.7 查询数据返回json格式的实现的文章就介绍到这了,更多相关Django返回json格式内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Python 相关文章推荐
Python的string模块中的Template类字符串模板用法
Jun 27 Python
Python数据结构与算法之常见的分配排序法示例【桶排序与基数排序】
Dec 15 Python
Python 装饰器实现DRY(不重复代码)原则
Mar 05 Python
使用python读取csv文件快速插入数据库的实例
Jun 21 Python
Python opencv实现人眼/人脸识别以及实时打码处理
Apr 29 Python
Python 中的 global 标识对变量作用域的影响
Aug 12 Python
python爬虫 爬取超清壁纸代码实例
Aug 16 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
Oct 17 Python
解决pandas展示数据输出时列名不能对齐的问题
Nov 18 Python
Python loguru日志库之高效输出控制台日志和日志记录
Mar 07 Python
关于python中remove的一些坑小结
Jan 04 Python
python实现简单的名片管理系统
Apr 26 Python
Python 获取异常(Exception)信息的几种方法
Dec 29 #Python
python 将html转换为pdf的几种方法
Dec 29 #Python
python实现ping命令小程序
Dec 28 #Python
如何用python 操作zookeeper
Dec 28 #Python
Pycharm在指定目录下生成文件和删除文件的实现
Dec 28 #Python
Python用Jira库来操作Jira
Dec 28 #Python
python性能测试工具locust的使用
Dec 28 #Python
You might like
php实现监听事件
2013/11/06 PHP
Android App中DrawerLayout抽屉效果的菜单编写实例
2016/03/21 PHP
php使用函数pathinfo()、parse_url()和basename()解析URL
2016/11/25 PHP
PHP错误提示It is not safe to rely on the system……的解决方法
2019/03/25 PHP
用JS判别浏览器种类以及IE版本的几种方法小结
2011/08/02 Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
2012/11/13 Javascript
复选框全选与全不选操作实现思路
2013/08/18 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
javascript多行字符串的简单实现方式
2015/05/04 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
JavaScript 对象深入学习总结(经典)
2015/09/29 Javascript
浅析AngularJS Filter用法
2015/12/28 Javascript
easyui combobox开启搜索自动完成功能的实例代码
2016/11/08 Javascript
利用nvm管理多个版本的node.js与npm详解
2017/11/02 Javascript
js实现随机数小游戏
2019/06/28 Javascript
微信小程序之左右布局的实现代码
2019/12/13 Javascript
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
安装python3的时候就是输入python3死活没有反应的解决方法
2018/01/24 Python
python3+PyQt5实现自定义流体混合窗口部件
2018/04/24 Python
Python爬虫信息输入及页面的切换方法
2018/05/11 Python
使用matplotlib中scatter方法画散点图
2019/03/19 Python
python opencv minAreaRect 生成最小外接矩形的方法
2019/07/01 Python
pyqt5、qtdesigner安装和环境设置教程
2019/09/25 Python
Python 网络编程之TCP客户端/服务端功能示例【基于socket套接字】
2019/10/12 Python
python:动态路由的Flask程序代码
2019/11/22 Python
在python3中实现更新界面
2020/02/21 Python
基于Pytorch版yolov5的滑块验证码破解思路详解
2021/02/25 Python
HTML5标签小集
2011/08/02 HTML / CSS
英国蛋糕装饰用品一站式商店:Craft Company
2019/03/18 全球购物
Linux不知道文件后缀名怎么判断文件类型
2014/08/21 面试题
九年级物理教学反思
2014/01/29 职场文书
工会换届选举方案
2014/05/21 职场文书
平安建设汇报材料
2014/12/29 职场文书
奖学金个人总结
2015/03/04 职场文书
开国大典观后感
2015/06/04 职场文书
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS