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中list列表的高级函数
May 17 Python
Scrapy-redis爬虫分布式爬取的分析和实现
Feb 07 Python
Python cookbook(数据结构与算法)根据字段将记录分组操作示例
Mar 19 Python
OpenCV2从摄像头获取帧并写入视频文件的方法
Aug 03 Python
django的auth认证,authenticate和装饰器功能详解
Jul 25 Python
centos7中安装python3.6.4的教程
Dec 11 Python
python 遗传算法求函数极值的实现代码
Feb 11 Python
Python如何使用OS模块调用cmd
Feb 27 Python
Python如何爬取b站热门视频并导入Excel
Aug 10 Python
超级详细实用的pycharm常用快捷键
May 12 Python
pytorch 中nn.Dropout的使用说明
May 20 Python
一文搞懂python异常处理、模块与包
Jun 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
2020最新CPU的性能排名
2020/04/02 数码科技
php获取mysql版本的几种方法小结
2008/03/25 PHP
PHP扩展程序实现守护进程
2015/04/16 PHP
Smarty模板引擎缓存机制详解
2016/05/23 PHP
浅谈PHP实现大流量下抢购方案
2017/12/15 PHP
Yii框架通过请求组件处理get,post请求的方法分析
2019/09/03 PHP
在b/s开发中经常用到的javaScript技术
2006/08/23 Javascript
javascript脚本编程解决考试分数统计问题
2008/10/18 Javascript
jquery imgareaselect 使用利用js与程序结合实现图片剪切
2009/07/30 Javascript
jQuery实现首页图片淡入淡出效果的方法
2015/06/10 Javascript
jquery实现的树形目录实例
2015/06/26 Javascript
angular.js之路由的选择方法
2016/09/24 Javascript
js清除浏览器缓存的几种方法
2017/03/15 Javascript
手机端转换rem适应
2017/04/01 Javascript
vue-router配合ElementUI实现导航的实例
2018/02/11 Javascript
jquery.pagination.js分页使用教程
2018/10/23 jQuery
微信小程序bindinput与bindsubmit的区别实例分析
2019/04/17 Javascript
Python中列表元素转为数字的方法分析
2016/06/14 Python
Windows安装Python、pip、easy_install的方法
2017/03/05 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
详解python中的index函数用法
2019/08/06 Python
Python流程控制常用工具详解
2020/02/24 Python
localStorage、sessionStorage使用总结
2017/11/17 HTML / CSS
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
UML设计模式笔试题
2014/06/07 面试题
国贸专业个人求职信范文
2014/01/08 职场文书
打架检讨书100字
2014/01/08 职场文书
广告宣传策划方案
2014/05/21 职场文书
读群众路线的心得体会
2014/09/03 职场文书
旷工辞退通知书
2015/04/17 职场文书
2015中秋祝酒词
2015/08/12 职场文书
公司新员工欢迎词
2015/09/30 职场文书
《确定位置》教学反思
2016/02/18 职场文书
2017春节晚会开幕词
2016/03/03 职场文书
html粘性页脚的具体使用
2022/01/18 HTML / CSS
Python通用验证码识别OCR库ddddocr的安装使用教程
2022/07/07 Python