Django2.1.7 查询数据返回json格式的实现
作者:海洋的渔夫 发布时间:2023-09-28 09:54:20
需求问题
在日常工作中,对于前端发送过来的请求,后端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>
浏览器显示如下:
来源:https://blog.csdn.net/u012887259/article/details/109475110
猜你喜欢
- php中主要用到的就是要用到fread()和fwirte()。而静态页面生成了之后,就会牵扯到修改的问题。这里可以用到正则匹配的方法来替换模
- 在数据库表里,我们有时候会保存了很多重复的数据,这些重复的数据浪费资源,我们要将其删除掉,应该怎么处理呢?下面来看一下。先看下我们的表数据,
- 确实,如果在原网站如果存在表单提交或cookies的验证,对于ASP来说,不使用基于SOCKET的组件就难以完成,其实,XMLHTTP的另外
- 引言之前松哥写过一个 MySQL 系列,但是当时是基于 MySQL5.7 的,最近有空在看 MySQL8 的文档,发现和 MySQL5.7
- PostgreSQL引进“分区”表特性,解放了之前采用“表继承”+“触发器”来实现分区表的繁琐、低效。而添加分区,都是手动执行SQL。演示目
- """已知列表li = [{"key": 5}, {"key": 9}
- 什么是爬虫?网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取万维网信息
- 本文实例讲述了python统计字符串中指定字符出现次数的方法。分享给大家供大家参考。具体如下:python统计字符串中指定字符出现的次数,例
- 前言python与C/C++不一样,它的变量使用有自己的特点,当初学python的时候,一定要记住“一切皆为对象,一切皆为对象的引用”这句话
- 1、jsp前端<%-- Created by IntelliJ IDEA. User: Lenovo Date: 2020/6/19
- 本文实例讲述了python实现支持目录FTP上传下载文件的方法。分享给大家供大家参考。具体如下:该程序支持ftp上传下载文件和目录、适用于w
- var yData = [];//Y轴数据 var xData = [];//X轴数据 $(data.rows).each(function
- 对于大多数web应用来说,数据库都是一个十分基础性的部分。如果你在使用PHP,那么你很可能也在使用MySQL—LAMP系列中举足轻重的一份子
- pytorch 中的 state_dict 是一个简单的python的字典对象,将每一层与它的对应参数建立映射关系.(如model的每一层的
- 相对C/C++ 而言,我们所用的JavaScript 在内存这一方面的处理已经让我们在开发中更注重业务逻辑的编写。但是随着业务的不断复杂化,
- 本文实例对比分析了python中lambda与def的用法。分享给大家供大家参考。具体分析如下:1、lambda用来创建匿名函数,不同于de
- 想要爬取指定网页中的图片主要需要以下三个步骤:(1)指定网站链接,抓取该网站的源代码(如果使用google浏览器就是按下鼠标右键 ->
- 一、argparse介绍官方文档argparse 模块是 Python 内置的一个用于命令项选项与参数解析的模块,argparse 模块可以
- 一、前言很多时候,我们都有远程控制电脑的需求。比如正在下载某样东西,需要让电脑在下载完后关机。或者你需要监控一个程序的运行状况等。今天我们就
- 前几天,我们Python猫交流学习群 里的 M 同学提了个问题。这个问题挺有意思,经初次讨论,我们认为它无解。然而,我认为它很有价值,应该继