django中使用ajax发送请求

1、ajax简单介绍

浏览器向网站发送请求时 是以URL和表单的形式提交的post 或get 请求，特点是：页面刷新
除此之外，也可以基于ajax向后台发送请求（异步）
依赖jQuery
编写ajax代码

$.ajax({url: "发送的地址" ,type: "post",data:{n1:123,n2:456        },success:function(res){}   }
)

2、在django 使用中了解的知识点

1、在django 中使用ajax发送post请求，通过下面方法免除csrf_token

from django.shortcuts import render,redirect,HttpResponse
from django.views.decorators.csrf import csrf_exempt@csrf_exempt
def task_ajax(request):return HttpResponse('hhhh')

2、想要去数据库中获取数据时：可以是对象也可以是字典

# 对象，当前行的所有数据
row_object = models.Order.objects.filter(id=uid).first()
row_object.id
row_object.title

也可以直接获取字典

# 字典，{"id":1,"title":"xxx"}
row_dict = models.Order.objects.filter(id=uid).values("id","title").filter()

# 列表 [obj,obj,obj]
queryset = models.Order.objects.all()
# [{"id":1,"title":"xxx"},{"id":1,"title":"xxx"},{"id":1,"title":"xxx"}]
queryset = models.Order.objects.all().values("id","title")# queryset = [(1,"xx"),(2,"xx")]
queryset = models.Order.objects.all().values_list("id","title")

3、在django中有一个库可以实现json序列化，简化代码

from django.http import JsonResponsedef order_delete(request):"""删除订单"""uid = request.GET.get('uid')exists = models.Order.objects.filter(id=uid).exists()if not exists:return JsonResponse({"status": False, "error": "数据不存在"})models.Order.objects.filter(id=uid).delete()return JsonResponse({"status": True})

3、示例，使用ajax 实现订单功能的增删改查

1、 定义订单表，在models.py中，定义表结构

from django.db import modelsclass Admin(models.Model):username = models.CharField(verbose_name="用户名",max_length=16)passwd = models.CharField(verbose_name="密码",max_length=64)def __str__(self):return self.usernameclass Order(models.Model):"""订单表"""oid = models.CharField(verbose_name='订单id',max_length=64)title = models.CharField(verbose_name='商品名称',max_length=32)price = models.DecimalField(verbose_name="价格",max_digits=10,decimal_places=2)status_choice = ((1,"待支付"),(2,"已支付"),)status = models.SmallIntegerField(verbose_name='状态',choices=status_choice,default=1)admin = models.ForeignKey(verbose_name="用户",to=Admin,on_delete=models.CASCADE)

2、定义路由，在urls.py中写接口路径

from django.urls import path
from app01.views import user,depart,pretty,admin,account,orderurlpatterns = [path('order/list/',order.order_list),path('order/add/',order.order_add),path('order/delete/',order.order_delete),path('order/detail/',order.order_detail),path('order/edit/',order.order_edit),
]

3、实现接口函数，在order.py中实现不同功能的函数

  • 列表展示 （查询）
from django.shortcuts import render
from datetime import datetime
import random
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
from app01 import models
from app01.utils.bootstrap import BootStrapModelForm
from app01.utils.pagination import Paginationclass OrderModelForm(BootStrapModelForm):class Meta:model = models.Order#fields = "__all__"# 排除的字段exclude = ['oid','admin']#fields = ['oid','title','price']def order_list(request):queryset = models.Order.objects.all().order_by('-id')page_obj = Pagination(request, queryset)form = OrderModelForm()context = {"form" : form,"queryset": page_obj.page_queryset,  # 分完页的数据"page_string": page_obj.html()  # 生成页码}return render(request,'order_list.html',context)

这里使用到了分页的方法，分页方法如下：

"""
自定义的分页组件，以后如果想要使用这个分页组件，你需要做的如下几件事：在视图函数 views.oy中def pretty_list(request):# 1、根据自己的情况去筛选自己的数据queryset = models.PrettyNum.objects.all()# 2、实例化分页对象page_obj = Pagination(request,queryset)context={"search_data": search_data,"queryset": page_obj.page_queryset,  #分完页的数据"page_string":page_obj.html()    #生成页码}return render(request,'pretty_list.html',context)在html 页面中<nav aria-label="Page navigation"><ul class="pagination">{{ page_string }}</ul></nav>"""
from django.utils.safestring import mark_safe
import copy
class Pagination():def __init__(self,request,queryset,page_size=10,page_param="page",plus=5):""":param request: 请求的对象:param queryset: 符合条件的数据（根据这个数据库给他镜像分页处理）:param page_size: 每页显示多少条数据:param page_param: 在URL中传递的获取分页的参数，例如 /pretty/list/?page=12:param plus: 显示当前页的前或后几页（页码）"""query_dict = copy.deepcopy(request.GET)query_dict._mutable = Trueself.query_dict = query_dictpage = request.GET.get(page_param,"1")if page.isdecimal():page = int(page)else:page = 1self.page = pageself.page_size = page_sizeself.start = (page-1)* page_sizeself.end = page * page_sizeself.page_queryset = queryset[self.start:self.end]total_count = queryset.count()total_page_count,div = divmod(total_count,page_size)if div:total_page_count += 1self.total_page_count = total_page_countself.plus = plusself.page_param = page_paramdef html(self):#计算出，显示当前页的前5页，后5页if self.total_page_count <= 2 * self.plus + 1:#数据库中的数据比较少，没有11页start_page = 1end_page = self.total_page_countelse:# 数据库中的数据比较多，大于11页# 当前页<5时，（小级值）if self.page <= self.plus:start_page = 1end_page = 2 * self.plus + 1else:# 当前页大于5#当前页 + 5 > 总页面if (self.page + self.plus) > self.total_page_count:start_page = self.total_page_count - 2*self.plusend_page = self.total_page_countelse:start_page = self.page - self.plusend_page = self.page + self.plus# 页码page_str_list = []self.query_dict.setlist(self.page_param,[1])page_str_list.append('<li><a href="?{}">首页</a></li>'.format(self.query_dict.urlencode()))# 上一页if self.page > 1:self.query_dict.setlist(self.page_param, [self.page -1])prev = '<li><a href="?{}">上一页</a></li>'.format(self.query_dict.urlencode())else:self.query_dict.setlist(self.page_param, [1])prev = '<li><a href="?{}">上一页</a></li>'.format(self.query_dict.urlencode())page_str_list.append(prev)#页面for i in range(start_page,end_page + 1):if i == self.page:self.query_dict.setlist(self.page_param, [i])ele = '<li class="active"><a href="?{}">{}</a></li>'.format(self.query_dict.urlencode(),i)else:self.query_dict.setlist(self.page_param, [i])ele = '<li><a href="?{}">{}</a></li>'.format(self.query_dict.urlencode(), i)page_str_list.append(ele)# 下一页if self.page < self.total_page_count:self.query_dict.setlist(self.page_param, [self.page + 1])prev = '<li><a href="?{}">下一页</a></li>'.format(self.query_dict.urlencode())else:self.query_dict.setlist(self.page_param, [self.total_page_count])prev = '<li><a href="?{}">下一页</a></li>'.format(self.query_dict.urlencode())page_str_list.append(prev)# 尾页self.query_dict.setlist(self.page_param, [self.total_page_count])page_str_list.append('<li><a href="?{}">尾页</a></li>'.format(self.query_dict.urlencode()))search_string = """<li><form style="float:left; margin-left: -1px" method="get"><input name="page" style="position: relative;float: left;display: inline-block;width: 80px;border-radius: 0" type="text" class="form-control" placeholder="页码"><button style="border-radius: 0" class="btn btn-default" type="submit">跳转</button></form></li>"""page_str_list.append(search_string)page_string = mark_safe("".join(page_str_list))return page_string
  • 订单的创建
@csrf_exempt
def order_add(request):"""创建订单，ajax请求"""form = OrderModelForm(data=request.POST)if form.is_valid():#保存数据之前生成oidform.instance.oid = datetime.now().strftime("%Y%m%d%H%M%S") + str(random.randint(1000,9999))# 创建订单的用户为当前登录的用户，可以取session中获取当前登录用户的信息form.instance.admin_id = request.session["info"]["id"]form.save()return JsonResponse({'status':True})return JsonResponse({"status":False, "error": form.errors})
  • 订单的删除
def order_delete(request):"""删除订单"""uid = request.GET.get('uid')exists = models.Order.objects.filter(id=uid).exists()if not exists:return JsonResponse({"status": False, "error": "数据不存在"})models.Order.objects.filter(id=uid).delete()return JsonResponse({"status": True})
  • 根据id 查询订单信息
def order_detail(request):"""编辑获取当前行信息"""uid = request.GET.get('uid')row_dict = models.Order.objects.filter(id=uid).values("id", "title","status","price").first()if not row_dict:return JsonResponse({"status": False, "error": "数据不存在"})result = {"status": True,"data": row_dict}return JsonResponse(result)
  • 编辑订单
@csrf_exempt
def order_edit(request):"""编辑订单"""uid = request.GET.get('uid')row_object = models.Order.objects.filter(id=uid).first()if not row_object:return JsonResponse({"status": False, "msg": "数据不存在"})form = OrderModelForm(data=request.POST,instance=row_object)if form.is_valid():form.save()return JsonResponse({'status': True})return JsonResponse({"status": False, "error": form.errors})

4、前端页面的实现order_list.html

{% extends 'layout.html' %}{% block content %}<div class="container"><div><input id="btnAdd"  type="button" class="btn btn-primary" value="新建订单1"></div></div><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title" id="myModalLabel">新 建</h4></div><div class="modal-body"><form  id="formAdd"><div class="clearfix">{% for field in form %}<div class="form-group"><label >{{ field.label }}</label>{{ field }}<span class="error-msg" style="color:red">{{ field.errors.0 }}</span></div>{% endfor %}</div></form></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">取 消</button><button id="btnSave" type="button" class="btn btn-primary">保 存</button></div></div></div></div><div class="container" style="margin-top: 15px" ><div class="panel panel-default"><div class="panel-heading"><span class="glyphicon glyphicon-list" aria-hidden="true"></span> 订单列表</div><table class="table table-bordered"><thead><tr><th>ID</th><th>订单</th><th>商品</th><th>价格</th><th>状态</th><th>用户</th><th>操作</th></tr></thead><tbody>{% for obj in queryset %}<tr><td>{{ obj.id }}</td><td>{{ obj.oid }}</td><td>{{ obj.title }}</td><td>{{ obj.price }}</td><td>{{ obj.get_status_display }}</td><td>{{ obj.admin.username }}</td><td><input uid="{{ obj.id }}" class="btn btn-primary btn-xs btn-edit" type="button" value="编辑"><input uid="{{ obj.id }}" class="btn btn-danger btn-xs btn-delete" type="button" value="删除"></td></tr>{% endfor %}</tbody></table></div><nav aria-label="Page navigation"><ul class="pagination">{{ page_string }}</ul></nav></div><div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title" id="myModalLabel">删除订单</h4></div><div class="modal-body"><span style="color: red">确定要删除吗？ 删除之后数据将无法找回</span></div><div class="modal-footer"><button id="btnConfirmDelete" type="button" class="btn btn-primary">确 认</button><button type="button" class="btn btn-default" data-dismiss="modal">取 消</button></div></div></div></div>{% endblock %}{% block js %}<script type="text/javascript">var DELETE_ID;var EDIT_ID;$(function (){bindBtnAddEvent();bindBtnSaveEvent();bindBtnDeleteEvent();bindBtnConfirmDeleteEvent();bindBtnEditEvent();})function bindBtnAddEvent() {$("#btnAdd").click(function () {//在新建的时候保存前将编辑的id 设置为undefined;EDIT_ID = undefined;//清空表单， $("#formAdd")是jquery对象， $("#formAdd")[0]是DOM对象$("#formAdd")[0].reset()//修改标题为新建$("#myModalLabel").text('新建')//点击新建按钮，显示对话框$('#myModal').modal('show');});}function bindBtnSaveEvent() {$("#btnSave").click(function (){//清除错误信息$(".error-msg").empty();if(EDIT_ID){//编辑doedit();}else {//新建doadd();}});}function doadd(){//向后台发送请求$.ajax({url: "/order/add/",type: "post",data: $("#formAdd").serialize(),dataType: "JSON",success:function (res){if(res.status){//alert("创建成功")//清空表单， $("#formAdd")是jquery对象， $("#formAdd")[0]是DOM对象$("#formAdd")[0].reset()//关闭对话框$('#myModal').modal('hide');//刷新页面location.reload();} else {//把错误信息显示在对话框中$.each(res.error, function (name,errorList) {$("#id_" + name).next().text(errorList[0]);})}}})}function doedit(){//向后台发送请求$.ajax({url: "/order/edit/?uid=" + EDIT_ID,type: "post",data: $("#formAdd").serialize(),dataType: "JSON",success:function (res){if(res.status){//alert("创建成功")//清空表单， $("#formAdd")是jquery对象， $("#formAdd")[0]是DOM对象$("#formAdd")[0].reset()//关闭对话框$('#myModal').modal('hide');//刷新页面location.reload();} else {if(res.msg){alert(res.msg)}else {//把错误信息显示在对话框中$.each(res.error, function (name,errorList) {$("#id_" + name).next().text(errorList[0]);})}}}})}function bindBtnDeleteEvent(){$(".btn-delete").click(function () {$("#deleteModal").modal('show');//获取当前行的id ,并赋值给全局变量DELETE_ID = $(this).attr('uid');});}function bindBtnConfirmDeleteEvent(){$("#btnConfirmDelete").click(function (){//点击确认按钮后，将要删除的id,发送到后台$.ajax({url: "/order/delete",type: "GET",dataType: "JSON",data: {uid: DELETE_ID},success:function (res){if(res.status){location.reload();} else {alert(res.error);}}})});}function bindBtnEditEvent(){$(".btn-edit").click(function (){//向后台发送ajax请求,获取当前行的信息var uid = $(this).attr('uid');EDIT_ID = uid;$.ajax({url: "/order/detail/",type: "GET",data: {uid: uid},dataType: "JSON",success: function (res){if(res.status){//清空表单， $("#formAdd")是jquery对象， $("#formAdd")[0]是DOM对象$("#formAdd")[0].reset()//修改标题为编辑$("#myModalLabel").text('编辑')//点击编辑按钮，显示对话框$('#myModal').modal('show');$.each(res.data, function (name,value){$("#id_" + name).val(value)})}else {alert(res.error);}}})});}</script>
{% endblock %}

页面效果如下：
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/38139.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Kafka的下载安装以及使用

Kafka的下载安装以及使用

一、Kafka下载 下载地址&#xff1a;https://kafka.apache.org/downloads 二、Kafka安装 因为选择下载的是 .zip 文件&#xff0c;直接跳过安装&#xff0c;一步到位。 选择在任一磁盘创建空文件夹&#xff08;不要使用中文路径&#xff09;&#xff0c;解压之后把文件夹内容…
阅读更多...
Redis 持久化

Redis 持久化

一、RDB 1.1 RDB持久化流程 fork子进程是阻塞的&#xff0c;如果同时开启RDB和AOF&#xff0c;默认使用AOF。 1、Redis父进程首先判断: 当前是否在执行save&#xff0c;或bgsave/bgrewriteaof (aof文件重写命令)的子进程&#xff0c;如果在执行则bgsave命令直接返回。 2、父进…
阅读更多...
【左神算法刷题班】第18节：汉诺塔问题、岛屿问题、最大路径和问题

【左神算法刷题班】第18节：汉诺塔问题、岛屿问题、最大路径和问题

第18节 题目1&#xff1a;汉诺塔问题&#xff08;变体&#xff09; 体系学习班18节有讲暴力递归的汉诺塔原题。 给定一个数组arr&#xff0c;长度为N&#xff0c;arr中的值只有1&#xff0c;2&#xff0c;3三种 arr[i] 1&#xff0c;代表汉诺塔问题中&#xff0c;从上往下第…
阅读更多...
主从同步介绍、主从同步原理、主从同步结构、构建思路、配置一主一从、配置一主多从、读写分离介绍、工作原理、配置mycat服务、添加数据源、创建集群、指定主机角

主从同步介绍、主从同步原理、主从同步结构、构建思路、配置一主一从、配置一主多从、读写分离介绍、工作原理、配置mycat服务、添加数据源、创建集群、指定主机角

Top NSD DBA DAY07 案例1&#xff1a;MySQL一主一从案例2&#xff1a;配置一主多从结构案例3&#xff1a;数据读写分离 1 案例1&#xff1a;MySQL一主一从 1.1 问题 数据库服务器192.168.88.53配置为主数据库服务器数据库服务器192.168.88.54配置为从数据库服务器客户端192…
阅读更多...
网络编程（8.14）TCP并发服务器模型

网络编程（8.14）TCP并发服务器模型

作业&#xff1a; 1. 多线程中的newfd&#xff0c;能否修改成全局&#xff0c;不行&#xff0c;为什么&#xff1f; 2. 多线程中分支线程的newfd能否不另存&#xff0c;直接用指针间接访问主线程中的newfd,不行&#xff0c;为什么&#xff1f; 多线程并发服务器模型原代码&…
阅读更多...
排查docker无法启动问题

排查docker无法启动问题

查看Linux系统操作日志(最后200行就可以排查)&#xff1a; tail -200f /var/log/messages
阅读更多...
数据分析--帆软报表--大数据大屏

数据分析--帆软报表--大数据大屏

进入国企公司学习有一段时间了&#xff0c;岗位是数据分析方向------ 母前使用的是帆软工具进行的开发。 可以进行大数据大屏 也可使嵌入到手机端。 下面是例子
阅读更多...
Python-OpenCV中的图像处理-GrabCut算法交互式前景提取

Python-OpenCV中的图像处理-GrabCut算法交互式前景提取

Python-OpenCV中的图像处理-GrabCut算法交互式前景提取 Python-OpenCV中的图像处理-GrabCut算法交互式前景提取 Python-OpenCV中的图像处理-GrabCut算法交互式前景提取 cv2.grabCut(img: Mat, mask: typing.Optional[Mat], rect, bgdModel, fgdModel, iterCount, mode…) img…
阅读更多...
【Apple】Logic Pro导入7.1.4.wav并自动分析多声道

【Apple】Logic Pro导入7.1.4.wav并自动分析多声道

Step1: 创建空项目 Step2: 选中下图“使用麦克风或...”这一项&#xff0c;底下要创建的轨道数填1就行。 点击创建之后&#xff1a; Step3: 拖动文件、拖动文件、拖动文件到项目中&#xff0c;并选中复选框“所有所选文件都源自一个项目&#xff08;将创建一个智能速度多轨道集…
阅读更多...
[NLP]LLM 训练时GPU显存耗用量估计

[NLP]LLM 训练时GPU显存耗用量估计

以LLM中最常见的Adam fp16混合精度训练为例&#xff0c;分析其显存占用有以下四个部分&#xff1a; GPT-2含有1.5B个参数&#xff0c;如果用fp16格式&#xff0c;只需要1.5G*2Byte3GB显存, 但是模型状态实际上需要耗费1.5B*1624GB. 比如说有一个模型参数量是1M&#xff0c;在…
阅读更多...
什么是前端框架？怎么学习？ - 易智编译EaseEditing

什么是前端框架？怎么学习？ - 易智编译EaseEditing

前端框架是一种用于开发Web应用程序界面的工具集合&#xff0c;它提供了一系列预定义的代码和结构&#xff0c;以简化开发过程并提高效率。 前端框架通常包括HTML、CSS和JavaScript的库和工具&#xff0c;用于构建交互式、动态和响应式的用户界面。 学习前端框架可以让您更高效…
阅读更多...
nginx的负载均衡

nginx的负载均衡

nginx的负载均衡 文章目录 nginx的负载均衡1.以多台虚拟机作服务器1.1 在不同的虚拟机上安装httpd服务1.2 在不同虚拟机所构建的服务端的默认路径下创建不同标识的文件1.3 使用windows本机的浏览器分别访问3台服务器的地址 2.在新的一台虚拟机上配置nginx实现反向代理以及负载均…
阅读更多...
使用element UI 的el-upload上传图片并携带参数的用法

使用element UI 的el-upload上传图片并携带参数的用法

直接看代码&#xff1a;前端实现 <div class"upload"><el-uploadclass"upload-demo"name"upload_name":data"{user_name:user_name}"action"http://localhost:8000/api/deal_pest_Image":show-file-list"fal…
阅读更多...
01|Java中常见错误或不清楚

01|Java中常见错误或不清楚

补充&#xff1a;length vs length() vs size() 1 java中的length属性是针对数组说的,比如说你声明了一个数组,想知道这个数组的长度则用到了length这个属性. 2 java中的length()方法是针对字符串String说的,如果想看这个字符串的长度则用到length()这个方法. 3.java中的siz…
阅读更多...
【Vue-Router】命名视图

【Vue-Router】命名视图

命名视图 同时 (同级) 展示多个视图&#xff0c;而不是嵌套展示&#xff0c;例如创建一个布局&#xff0c;有 sidebar (侧导航) 和 main (主内容) 两个视图&#xff0c;这个时候命名视图就派上用场了。 可以在界面中拥有多个单独命名的视图&#xff0c;而不是只有一个单独的出…
阅读更多...
Python获取、修改主机名称和IP地址实践

Python获取、修改主机名称和IP地址实践

Python获取、修改主机名称和IP地址的方法有多种&#xff0c;内置socket模块、执行系统命令、第三方模块等等&#xff0c;本文只是完成功能的一次成功的实践。 1. 获取、修改主机名称 本案例使用python的socket模块获取、修改主机名称&#xff0c;socket模块是一个用于实现网络…
阅读更多...
UML-A 卷-知识考卷

UML-A 卷-知识考卷

UML-A 卷-知识考卷 UML有多少种图&#xff0c;请列出每种图的名字&#xff1a; 常用的几种UML图&#xff1a; 类图&#xff08;Class Diagram&#xff09;&#xff1a;类图是描述类、接口、关联关系和继承关系的图形化表示。它展示了系统中各个类之间的静态结构和关系。时序…
阅读更多...
TFRecords详解

TFRecords详解

内容目录 TFRecords 是什么序列化(Serialization)tf.data 图像序列化&#xff08;Serializing Images)tf.Example函数封装 小结 TFRecords 是什么 TPU拥有八个核心&#xff0c;充当八个独立的工作单元。我们可以通过将数据集分成多个文件或分片&#xff08;shards&#xff09;…
阅读更多...
2023年7月京东洗衣机行业品牌销售排行榜（京东数据分析软件）

2023年7月京东洗衣机行业品牌销售排行榜（京东数据分析软件）

2023年上半年&#xff0c;洗衣机市场表现平淡&#xff0c;同环比来看出货量都有一定程度的下滑。7月份&#xff0c;洗衣机市场仍未改变这一下滑态势。 根据鲸参谋电商数据分析平台的相关数据显示&#xff0c;7月份&#xff0c;京东平台洗衣机的销量为109万&#xff0c;环比下降…
阅读更多...
web图书管理系统Servlet+JSP+javabean+MySQL图书商城图书馆 源代码

web图书管理系统Servlet+JSP+javabean+MySQL图书商城图书馆 源代码

本项目为前几天收费帮学妹做的一个项目&#xff0c;Java EE JSP项目&#xff0c;在工作环境中基本使用不到&#xff0c;但是很多学校把这个当作编程入门的项目来做&#xff0c;故分享出本项目供初学者参考。 一、项目描述 web图书管理系统ServletJSPjavabeanMySQL 系统有1权限…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023