django修改成ajax分页,Django框架进阶6 多对多三种创建方式, Ajax, Content-Type前后端传输数据编码格式, Ajax发送文件数据, django内置的序列化功能, A...

最新推荐文章于 2023-10-21 07:52:06 发布
最新推荐文章于 2023-10-21 07:52:06 发布
阅读量132 收藏
点赞数
文章标签： django修改成ajax分页

多对多三种创建方式

1.全自动(较为常用)

class Book(models.Model):

title = models.CharField(max_length=32)

authors = models.ManyToManyField(to='Author')

# orm就会自动帮你创建第三张表

class Author(models.Model):

name = models.CharField(max_length=32)

'''

好处：第三张表自己创建

不足之处：第三张表无法扩展额外的字段

'''

2.纯手动(了解)

class Book(models.Model):

title = models.CharField(max_length=32)

class Author(models.Model):

name = models.CharField(max_length=32)

class Book2Author(models.Model):

book = models.ForeignKey(to='Book')

author = models.ForeignKey(to='Author')

create_time = models.DateField(auto_now_add=True)

"""

好处在于第三表可以扩展额外的字段

不足之处:orm查询的时候会带来不便

"""

3.半自动(推荐)

class Book(models.Model):

title = models.CharField(max_length=32)

authors = models.ManyToManyField(to='Author', through='Book2Author', through_fields=('book', 'author'))

class Author(models.Model):

name = models.CharField(max_length=32)

books = models.ManyToManyField(to='Author', through='Book2Author', through_fields=('author', 'book'))

class Book2Author(models.Model):

book = models.ForeignKey(to='Book')

author = models.ForeignKey(to='Author')

create_time = models.DateField(auto_now_add=True)

"""

好处在于第三步可以扩展任意的额外字段 还可以利用orm 正反向查询

不足之处:无法利用

add

set

remove

clear

虽然无法使用了 但是你还可以自己直接操作第三表

"""

Ajax

同步与异步

同步　　任务提交之后原地等待任务的返回结果  进程表现上来说  阻塞

异步　　任务提交之后不需要原地等待返回结果  直接执行下一行代码  继承表现上来说  非阻塞任务的结果肯定是需要的  是通过异步回调机制  callback()

与后端进行交互的方式

1.浏览器窗口输入url回车　　　　GET

2.a标签href属性填写url点击　　   GET

3.form表单　　　　　　　　　　GET/POST

4.Ajax　　　　　　　　　　　　GET/POST

Ajax并不是一门新的语言  它其实就是基于js写的一个功能模块而已

由于原生js书写ajax较为繁琐  所以我们直接学jQuery封装好的ajax模块操作

初识ajax

案例：页面上有三个input框  一个按钮

用户在前两个框中输入数字  点击按钮保证页面不刷新的情况下将数据发到后端做计算

将计算好的结果再发给前端展示到第三个input框中

ajax基本语法结构

// ajax基本语法

$.ajax({

// 1.到底朝哪个后端提交数据

url:'', // 控制数据的提交路径 有三种写法 跟form表单的action属性一致

// 2.指定当前请求方式

type:'post',

// 3.提交的数据

data:{'i1':$('#i1').val(),'i2':$('#i2').val()},

// 4.ajax是异步提交 所以需要给一个回调函数来处理返回的结果

success:function (data) { // data就是异步提交的返回结果

// 将异步回调的结果通过DOM操作渲染到第三个input框中

$('#i3').val(data)

}

})

例：

995ca0097f18a9e361e84c4d98c7846c.png

templates/index.html

Title

+ =

按钮

$('#d1').click(function () {

// 获取两个框里面内容 朝后端提交异步请求

// ajax基本语法

$.ajax({

// 1.到底朝那个后端提交数据

url:'', // 控制数据的提交路径 有三种写法 跟form表单的action属性一样

// 2.指定当前请求方式

type:'post',

// 3.提交的数据

data:{'i1':$('#i1').val(),'i2':$('#i2').val()},

// 4.ajax是异步提交 所以需要给一个回调函数来处理返回的结果

success:function (data) { // data就是异步提交的返回结果

// 将异步回调的结果通过DOM操作渲染到第三个input框中

$('#i3').val(data)

}

})

})

app01/views.py

from django.shortcuts import render,HttpResponse

def index(request):

if request.method == 'POST':

i1 = request.POST.get('i1')

i2 = request.POST.get('i2')

# i1 和 i2 是字符串类型 需要先做类型转换

i3 = int(i1) + int(i2)

return HttpResponse(i3)

return render(request,'index.html')

content-Type前后端传输数据的编码格式

urlencoded

formdata

application/json

form表单

默认是urlencoded编码格式传输数据

31772e0d134d4caea9f736370b7e5551.png

urlencoded数据格式

username=jason&password=123

django后端针对该格式的数据  会自动解析并帮你打包到request.POST中

formdata数据格式

django后端针对符合urlencoded编码格式数据(普通键值对)还是统一解析到request.POST中

而针对formdata文件数据就会自动解析放到request.FILES中

ajax提交

ajax默认的也是urlencoded编码格式

前后端数据交互   编码格式与数据格式一定要一致

application/json

django后端针对json格式数据  并不会做任何的处理

以为没有人拿，所以直接放在request.body中

$('#d2').on('click',function () {

$.ajax({

rl:'',

type:'post',

// 修改content-Type参数

contentType:'application/json',

data:JSON.stringify({'username':'jason','password':123}), // 将数据序列化成json格式字符串

success:function (data) {

alert(data)

}

})

})

例：

templates/ab_ct.html

8f900a89c6347c561fdf2122f13be562.png

961ddebeb323a10fe0623af514929fc1.png

ajax发送json格式数据

$('#d2').on('click',function () {

$.ajax({

url:'',

type:'post',

// 修改content-Type参数

contentType:'application/json',

data:JSON.stringify({'username':'jason','password':123}), // 将数据序列化成JSON格式字符串

success:function (data) {

alert(data)

}

})

})

View Code

app01/views.py

from django.shortcuts import render,HttpResponse

import json

def ab_ct(request):

if request.method == 'POST':

# print(request.POST)

# print(request.FILES)

# print(request.body)

#自己处理json格式数据

json_bytes = request.body

# 先解码

# json_str = json_bytes.decode('utf8')

# 扩展 json.loads能够自动解码并序列化

json_dict = json.loads(json_bytes)

print(json_dict,type(json_dict))

return render(request,'ab_ct.html')

ajax发送文件(******)

内置对象FormData

即发普通键值对也发文件

ajax发送文件数据

$('#d3').click(function () {

// 1 需要先生成一个内置对象

var myFormData = new FormData();

// 2 传普通键值对 当普通键值对较多的时候 我们可以利用for循环来添加

myFormData.append('username','jason');

myFormData.append('password',123);

// 3 传文件

myFormData.append('myfile',$('#i1')[0].files[0]); // 获取input框内部用户上传的文件对象

// 发送ajax请求

$.ajax({

url:'',

type:'post',

data:myFormData,

// 发送formdata对象需要指定两个关键性的参数

processData:false, // 让浏览器不要对你的数据进行任何的操作

contentType:false, // 不要使用任何编码格式 对象formdata自带编码格式并且django能够识别该对象

success:function (data) {

alert(data)

}

})

})

序列化

django内置序列化组件

接口文档 表名该大字典内都有哪些键值对

from django.shortcuts import render,HttpResponse,redirect

import json

# Create your views here.

from app01 import models

from django.core import serializers

def ab_se(request):

user_queryset = models.Userinfo.objects.all()

# user_list = []

# for user_obj in user_queryset:

# user_list.append({

# 'username':user_obj.username,

# 'password':user_obj.password,

# 'gender':user_obj.get_gender_display(),

# })

# res = json.dumps(user_list)

res = serializers.serialize('json',user_queryset) # 注意此处json为字符串

# return render(request,'ab_se.html',locals())

return HttpResponse(res)

其结果为

8f900a89c6347c561fdf2122f13be562.png

961ddebeb323a10fe0623af514929fc1.png

1 [{

2 "model": "app01.userinfo",

3 "pk": 1,

4 "fields": {

5 "username": "jason",

6 "password": "123",

7 "gender": 1

8 }

9 }, {

10 "model": "app01.userinfo",

11 "pk": 2,

12 "fields": {

13 "username": "tank",

14 "password": "234",

15 "gender": 2

16 }

17 }, {

18 "model": "app01.userinfo",

19 "pk": 3,

20 "fields": {

21 "username": "egon",

22 "password": "456",

23 "gender": 3

24 }

25 }, {

26 "model": "app01.userinfo",

27 "pk": 4,

28 "fields": {

29 "username": "sean",

30 "password": "678",

31 "gender": 4

32 }

33 }]

View Code

批量插入

def ab_bc(request):

# 先插入1000条数据

# for i in range(1,1001):

# models.Book.objects.create(title='第%s本书'%i)

book_list =[]

for i in range(1,10001):

book_list.append(models.Book(title='新的%s书'%i))

models.Book.objects.bulk_create(book_list) # 批量插入数据的方式

book_queryset = models.Book.objects.all()

return render(request,'ab_bc.html',locals())

自定义分页器

分页器组件

class Pagination(object):

def __init__(self,current_page,all_count,per_page_num=10,pager_count=11):

"""

封装分页相关数据

:param current_page: 当前页

:param all_count: 数据库中的数据总条数

:param per_page_num: 每页显示的数据条数

:param pager_count: 最多显示的页码个数

用法:

queryset = model.objects.all()

page_obj = Pagination(current_page,all_count)

page_data = queryset[page_obj.start:page_obj.end]

获取数据用page_data而不再使用原始的queryset

获取前端分页样式用page_obj.page_html

"""

try:

current_page = int(current_page)

except Exception as e:

current_page = 1

if current_page <1:

current_page = 1

self.current_page = current_page

self.all_count = all_count

self.per_page_num = per_page_num

# 总页码

all_pager, tmp = divmod(all_count, per_page_num)

if tmp:

all_pager += 1

self.all_pager = all_pager

self.pager_count = pager_count

self.pager_count_half = int((pager_count - 1) / 2)

@property

def start(self):

return (self.current_page - 1) * self.per_page_num

@property

def end(self):

return self.current_page * self.per_page_num

def page_html(self):

# 如果总页码 < 11个：

if self.all_pager <= self.pager_count:

pager_start = 1

pager_end = self.all_pager + 1

# 总页码 > 11

else:

# 当前页如果<=页面上最多显示11/2个页码

if self.current_page <= self.pager_count_half:

pager_start = 1

pager_end = self.pager_count + 1

# 当前页大于5

else:

# 页码翻到最后

if (self.current_page + self.pager_count_half) > self.all_pager:

pager_end = self.all_pager + 1

pager_start = self.all_pager - self.pager_count + 1

else:

pager_start = self.current_page - self.pager_count_half

pager_end = self.current_page + self.pager_count_half + 1

page_html_list = []

# 添加前面的nav和ul标签

page_html_list.append('''

''')

first_page = '

首页' % (1)

page_html_list.append(first_page)

if self.current_page <= 1:

prev_page = '

上一页'

else:

prev_page = '

上一页' % (self.current_page - 1,)

page_html_list.append(prev_page)

for i in range(pager_start, pager_end):

if i == self.current_page:

temp = '

%s' % (i, i,)

else:

temp = '

%s' % (i, i,)

page_html_list.append(temp)

if self.current_page >= self.all_pager:

next_page = '

下一页'

else:

next_page = '

下一页' % (self.current_page + 1,)

page_html_list.append(next_page)

last_page = '

尾页' % (self.all_pager,)

page_html_list.append(last_page)

# 尾部添加标签

page_html_list.append('''

''')

return ''.join(page_html_list)

后端代码

current_page = request.GET.get('page', 1) # 当前页数

all_count = book_queryset.count() # 数据总条数

# 1 现生成一个自定义分页器类对象

page_obj = Pagination(current_page=current_page,all_count=all_count,pager_count=9)

# 2 针对真实的queryset数据进行切片操作

page_queryset = book_queryset[page_obj.start:page_obj.end]

return render(request,'ab_bc.html',locals())

前端代码

{% for book_obj in page_queryset %}

{{ book_obj.title }}

{% endfor %}

{{ page_obj.page_html|safe }}

ajax结合sweetalert实现删除二次确认

6b1254a1d9e09742d00439aa5acd15a5.png

代码：

views.py

from app01 import models

from django.http import JsonResponse

import time

def show_user(request):

'''

前后端如果是通过ajax进行交互 那么交互的媒介一般情况下都是一个字典

:param request:

:return:

'''

if request.method == 'POST':

time.sleep(3) # 模拟延迟3秒处理再删除

back_dic = {'code':1000,'msg':''}

delete_id = request.POST.get('delete_id')

models.Userinfo.objects.filter(pk=delete_id).delete()

back_dic['msg'] = '删除成功, 准备跑路！！！'

return JsonResponse(back_dic)

user_queryset = models.Userinfo.objects.all()

return render(request,'show_user.html',locals())

models.py

from django.db import models

class Userinfo(models.Model):

username = models.CharField(max_length=32)

password = models.CharField(max_length=32)

gender_choices = ((1,'male'),(2,'female'),(3,'other'))

gender = models.IntegerField(choices=gender_choices)

templates/show_user.html

Title

{% load static %}

div.sweet-alert h2{

padding-top: 10px;

}

数据展示

主键用户名密码性别操作

{% for user_obj in user_queryset %}

{{ user_obj.pk }}{{ user_obj.username }}{{ user_obj.password }}{{ user_obj.get_gender_display }}

编辑

删除

{% endfor %}

$('.cancel').click(function () {

var $aEle = $(this); {# this 指代当前点击对象 #}

swal({

title: "你确定要删嘛?",

text: "你如果删了，你就要准备跑路了",

type: "warning",

showCancelButton: true,

confirmButtonClass: "btn-danger",

confirmButtonText: "是，老子就是要删!",

cancelButtonText: "惹不起惹不起!",

closeOnConfirm: false,

closeOnCancel: false,

showLoaderOnConfirm: true // 确认延迟参数

},

function(isConfirm) {

if (isConfirm) {

// 发送ajax请求

$.ajax({

url:'',

type:'post',

data:{'delete_id':$aEle.attr('data_id')},

success:function (data) { // 回调函数会自动将二进制的json格式数据 解码并反序列成js中的数据类型

if (data.code == 1000){

swal("删了!", "你可以跑路了.", "success");

// 方式一 页面刷新

{#window.location.reload() #}

// 方式二 DOM操作动态修改

$aEle.parent().parent().remove()

}else{

swal('发生了未知的错误','error') // 将标签直接移除

}

}

});

} else {

swal("怂逼", "你成功的刷新我对你的认知 :)", "error");

}

});

})

来源：https://www.cnblogs.com/ludingchao/p/12178133.html

深渊号角mkq0.~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
django简单的前后端分离的数据传输实例 axios
10-15
本实例主要介绍了如何在Django框架下实现简单的前后端分离，并利用axios库进行数据传输。Axios是一款基于Promise的HTTP库，可以在浏览器和Node.js中使用。 在前端部分，本例使用了Vue.js作为前端框架。Vue中的axios...
django-jinja-knockout：AJAX和传统的Django数据表和小部件。 仅显示ModelForms。 使用AJAX提交和验证的ModelForms内联表单集。 适用于Django模板
02-04
`django-jinja-knockout` 是一个开源项目，它将Django、Jinja2模板引擎、Knockout.js、Bootstrap以及AJAX技术融合在一起，为开发人员提供了一套高效的数据表和表单处理工具。这个项目特别强调在Django应用中使用...
7.Django之Ajax与分页器
清风
03-17 964
1. 提交数据方式 请求的方式: 1. 浏览器url GET请求 2. a便签 href属性 GET请求 3. form表单 GET/POST请求 4. Ajax GET/POST请求 2. Ajax Ajax的作用:异步提交,局部刷新. 优点:在不重新加载整个页面的情况下,可以与服务器交互数据并更新网页中的内容. 应用: 网站的注册,动态的获取用户输入,实时的与后端确定,并实时展示到前端（局部刷新）. 80% 前后端交互都是Ajax,
Django分页、Ajax
一个有深度的博客
09-23 1157
一、Django的分页： 分页是为了减少一次性从数据库读过多的数据。 先说一下offset和limit。 语句1：select * from student limit 9,4 语句2：slect * from student limit 4 offset 9 这两条语句的查询结果是一样的。同样可以完成分页的功能。 1、Django内置分页： from django.core.p...
Django和jQuery，实现Ajax表格数据分页展示
最新发布
weixin_69999177的博客
10-21 2063
需要考虑一个问题：在前端上的分页按钮是有样式的，且样式是根据后端返回的参数进行判断，最终决定给哪一个分页按钮增加样式，为了避免分页数据可以正常获取，但是分页样式不会改变，基于这个问题进行思考，最后的解决方法是：将分页部分的代码也通过Ajax进行渲染。当存在重新请求接口才能返回数据的功能时，若页面的内容很长，每次点击一个功能，页面又回到了顶部，对于用户的体验感不太友好，我们希望当用户点击这类的功能时，能直接加载到数据，请求后端的操作不会呈现在前端，给用户一种无感知的状态。Key的数据渲染到分页的div中。
前后端入门-django 序列化器实现增删改查
wisdom_lp的博客
03-26 658
django 序列化器实现增删改查的简单实现
解决Django中多条件查询的问题
09-19
在Django中，进行多条件查询是常见的需求，特别是在开发复杂的Web应用时。本文将详细介绍如何在Django中解决多条件查询的问题，并提供一个实际的示例。 首先，我们需要了解Django的ORM(Object-Relational Mapping)...
django-rest-framework-datatables：Django REST框架与Datatables之间的无缝集成
01-30
- **性能优化**：通过服务器端处理分页和过滤，减少前端数据传输量，提升页面加载速度。 - **灵活性**：可以自定义Datatables的行为，如选择不同的数据源、调整列宽、设置自定义列等。 - **前后端解耦**：保持DRF ...
django ajax提交评论并自动刷新功能的实现代码
12-09
在本文中，我们将深入探讨如何使用Django与jQuery AJAX实现一个评论提交并自动刷新的功能。首先，这个功能的实现依赖于前端的JavaScript和后端的Python(Django)处理。 前端部分，主要涉及到jQuery库的使用，它使得...
Django+Paginator模块+LayUi实现分页(精简版)
12-23
Django之Paginator分页模块+layui表格(精简版) 上一篇也分享了一个关于Paginator+layui的ajax动态加载数据的博客，只是用到了layui静态表格、样式，功能上是根据自己思路用jQuery动态加载数据的博客分享，说白了上一篇是基本原生的写法，并没有用到layui框架内置的模块写法。 这次，给大家分享layui动态表格内置的方法结合django分页模块来实现表格的一系列操作，简单实用方便。 Django：非常强大的web开发框架 Paginator：Django自带的一个轻量级分页模块 layui：类UI(谐音)，一款强大的国产前端框架，相对Bootstrap来
Django框架实现分页显示内容的方法详解
09-19
主要介绍了Django框架实现分页显示内容的方法,结合实例形式详细分析了Django框架引入bootstrap样式进行分页显示相关步骤、实现方法与操作注意事项,需要的朋友可以参考下
利用Ajax技术实现分页
05-09
Ajax 分页 自己研究下就可以了， 很好弄的................
ajax请求后台数据实现分页功能
07-05
ajax请求后台数据实现分页功能
Django 分页和使用Ajax5.3
Lansonli（蓝深李）的博客
10-20 639
分页 Django提供了一些类实现管理数据分页，这些类位于django/core/paginator.py中 Paginator对象 Paginator(列表,int)：返回分页对象，参数为列表数据，每面数据的条数 属性 count：对象总数 num_pages：页面总数 page_range：页码列表，从1开始，例如[1, 2, 3, 4] 方法 page(num)：下标以1开始，如...
Django与Ajax
angyuqiang2559的博客
10-29 153
Ajax Ajax简介 AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）。 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求； 异步交互：客户端...
Python-Django-Ajax分页功能实现
在红尘中争渡
03-25 2455
Django-Ajax分页功能实现 前言 Django框架，ajax功能实现，也是踩了几个坑之后的版本。 前端(T: 模板) 注意: 整个样式用的是Bootstrap，所以使用的时候要引入bootstrap的层叠样式表和JS脚本。 <!-- 表格--> <table class="table table-striped"> <!-- 表头--> <thead> <tr> <td style="font-weig
django 做分页 ajax,Django AJAX带分组加载分页
weixin_36444661的博客
08-06 147
我有一个页面显示按日期分组的消息，并通过AJAX进行分页。考虑数据库包含9个消息Django AJAX带分组加载分页3被送往2月9日3被送往8二月3被送往2月7日和查询集仅由5个消息限于。查看代码看起来像这样page = Paginator(queryset, int(request.GET['limit'])).page(request.GET['page'])return paginator....
django ajax 查询,Django分页和Ajax查询
weixin_35381903的博客
08-05 288
在Django中，实现分页以在多个页面上显示查询项目是非常简单的。使用Ajax仅更新实际发生更改的页面位，而不是每次加载整个页面也是非常直接的。但是，当我们将两者结合在一起时，我发现它有点问题。Django分页和Ajax查询在下面的示例中，搜索结果应显示在相应的result_list.html中。{{ form.as_p }}{% include "result_list.html" %}resu...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值