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实现的tab文件操作类分享
Nov 20 Python
python实现telnet客户端的方法
Apr 15 Python
Python lxml模块安装教程
Jun 02 Python
Python json 错误xx is not JSON serializable解决办法
Mar 15 Python
Python标准库inspect的具体使用方法
Dec 06 Python
详解python实现线程安全的单例模式
Mar 05 Python
pandas DataFrame 删除重复的行的实现方法
Jan 29 Python
Python环境Pillow( PIL )图像处理工具使用解析
Sep 12 Python
python离线安装外部依赖包的实现
Feb 13 Python
Python如何使用paramiko模块连接linux
Mar 18 Python
Python做图像处理及视频音频文件分离和合成功能
Nov 24 Python
python和C/C++混合编程之使用ctypes调用 C/C++的dll
Apr 29 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
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
php 数据库字段复用的基本原理与示例
2011/07/22 PHP
PHP图片验证码制作实现分享(全)
2012/05/10 PHP
Yii rules常用规则示例
2016/03/15 PHP
Symfony2实现从数据库获取数据的方法小结
2016/03/18 PHP
浅谈PHP进程管理
2019/03/08 PHP
ThinkPhP+Apache+PHPstorm整合框架流程图解
2020/11/23 PHP
JavaScript的parseInt 进制问题
2009/05/07 Javascript
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
javascript forEach通用循环遍历方法
2010/10/11 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
2013/01/06 Javascript
JS动态添加Table的TR,TD实现方法
2015/01/28 Javascript
javascript实现一个数值加法函数
2015/06/26 Javascript
简单实现限制uploadify上传个数
2015/11/16 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
2016/11/11 Javascript
jquery滚动条插件slimScroll使用方法
2017/02/09 Javascript
微信头像地址失效踩坑记附带解决方案
2019/09/23 Javascript
node后端服务保活的实现
2019/11/10 Javascript
Vertx基于EventBus发送接受自定义对象
2020/11/16 Javascript
pycharm 使用心得(二)设置字体大小
2014/06/05 Python
Django自定义插件实现网站登录验证码功能
2017/04/19 Python
python矩阵转换为一维数组的实例
2018/06/05 Python
python二进制文件的转译详解
2019/07/03 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
flask 实现token机制的示例代码
2019/11/07 Python
python3 requests库实现多图片爬取教程
2019/12/18 Python
python 爬虫基本使用——统计杭电oj题目正确率并排序
2020/10/26 Python
HTML5实现一个能够移动的小坦克示例代码
2013/09/02 HTML / CSS
大学生2014全国两会学习心得体会
2014/03/10 职场文书
捐书活动总结
2014/05/04 职场文书
防灾减灾日活动总结
2014/08/26 职场文书
社区党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
杜甫草堂导游词
2015/02/03 职场文书
优秀英文求职信范文
2015/03/19 职场文书
烈士陵园扫墓感想
2015/08/07 职场文书
《刷子李》教学反思
2016/02/20 职场文书