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 JsonResponse

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})

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

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

from django.db import models

class Admin(models.Model):

username = models.CharField(verbose_name="用户名",max_length=16)

passwd = models.CharField(verbose_name="密码",max_length=64)

def __str__(self):

return self.username

class 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,order

urlpatterns = [

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 Pagination

class 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 页面中

"""

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 = True

self.query_dict = query_dict

page = request.GET.get(page_param,"1")

if page.isdecimal():

page = int(page)

else:

page = 1

self.page = page

self.page_size = page_size

self.start = (page-1)* page_size

self.end = page * page_size

self.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 += 1

self.total_page_count = total_page_count

self.plus = plus

self.page_param = page_param

def html(self):

#计算出，显示当前页的前5页，后5页

if self.total_page_count <= 2 * self.plus + 1:

#数据库中的数据比较少，没有11页

start_page = 1

end_page = self.total_page_count

else:

# 数据库中的数据比较多，大于11页

# 当前页<5时，（小级值）

if self.page <= self.plus:

start_page = 1

end_page = 2 * self.plus + 1

else:

# 当前页大于5

#当前页 + 5 > 总页面

if (self.page + self.plus) > self.total_page_count:

start_page = self.total_page_count - 2*self.plus

end_page = self.total_page_count

else:

start_page = self.page - self.plus

end_page = self.page + self.plus

# 页码

page_str_list = []

self.query_dict.setlist(self.page_param,[1])

page_str_list.append('

首页

'.format(self.query_dict.urlencode()))

# 上一页

if self.page > 1:

self.query_dict.setlist(self.page_param, [self.page -1])

prev = '

上一页

'.format(self.query_dict.urlencode())

else:

self.query_dict.setlist(self.page_param, [1])

prev = '

上一页

'.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 = '

{}

'.format(self.query_dict.urlencode(),i)

else:

self.query_dict.setlist(self.page_param, [i])

ele = '

{}

'.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 = '

下一页

'.format(self.query_dict.urlencode())

else:

self.query_dict.setlist(self.page_param, [self.total_page_count])

prev = '

下一页

'.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('

尾页

'.format(self.query_dict.urlencode()))

search_string = """

跳转

"""

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():

#保存数据之前生成oid

form.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 %}

{% endblock %}

{% block js %}

{% endblock %}

页面效果如下：

好文链接