Ajax简介
客户端发送请求，请求交给xhr，xhr把请求提交给服务，服务器进行业务处理，服务器响应数据交给xhr对象，xhr对象接收数据，由javascript把数据写到页面上
Ajax
页面不刷新的情况下可以与后端进行数据交互
'''异步提交 局部刷新'''
ajax不是一门全新知识 本质就是一些js代码 我们学习ajax直接使用jQuery封装之后的版本(语法更加简单)
使用ajax的前提必须要引入jQuery文件
# 基本语法
$.ajax({
url:'', // 后端地址 三种填写方式 与form标签的action一致
type:'post', // 请求方式 默认也是get
data:{'v1':v1Val, 'v2':v2Val}, // 发送的数据
success:function (args) { // 后端返回结果之后自动触发 args接收后端返回的数据
$('#d3').val(args)
}
})
# 前戏
学习ajax一定要能够发现与form表单提交数据的区别
ajax提交数据页面不用刷新 原始数据还在 处理数据的过程中不影响页面其他操作
form表单提交数据页面刷新 原始数据不在 并且处理数据的过程中无法做其他操作
页面上有三个input框和一个提交按钮 前两个框输入数字 点击按钮 最后一个框里面展示数字的和 并且页面不能刷新
<input type="text" id="d1"> + <input type="text" id="d2"> = <input type="text" id="d3">
<button id="subBtn">点我发送Ajax请求</button>
<script>
// 2.给按钮绑定点击事件
$('#subBtn').click(function (){
// 1.先获取两个框里面的数据
let v1Val = $('#d1').val();
let v2Val = $('#d2').val();
// 3.发送ajax请求
$.ajax({
url:'', // 后端地址 三种填写方式 与form标签的action一致
type:'post', // 请求方式 默认也是get
data:{'v1':v1Val,'v2':v2Val}, // 发送数据
success:function (args){ // 后端返回结果之后自动触发 args接收后端返回的数据
$('#d3').val(args)
}
})
})
</script>
Ajax提交数据的多种类型
# form表单默认发送的编码格式
1.urlencoded
ajax默认的编码格式、form表单默认也是
数据格式 xxx=yyy&uuu=ooo&aaa=kkk
django后端会自动处理到request.POST中
# form表单发送文件
2.formdata
django后端针对普通的键值对还是处理到request.POST中 但是针对文件会处理到request.FILES中
# ajax发送json格式数据
3.application/json
form表单不支持 ajax可以
<script>
$('#d1').click(function () {
$.ajax({
url:'',
type:'post', // 默认get请求
data:JSON.stringify({'name':'jason','age':18}), // 千万不要骗人家
contentType:'application/json',
success:function (args) {
alert(args)
}
})
})
</script>
后端需要从request.body中获取并自己处理
<script>
$('#d3').click(function () {
// 1.先产生一个FormData对象
let myFormDataObj = new FormData();
// 2.往该对象中添加普通数据
myFormDataObj.append('name', 'jason');
myFormDataObj.append('age', 18);
// 3.往该对象中添加文件数据
myFormDataObj.append('file', $('#d2')[0].files[0])
// 4.发送ajax请求
$.ajax({
url:'',
type:'post',
data:myFormDataObj,
// ajax发送文件固定的两个配置
contentType:false,
processData:false,
success:function (args){
alert(args)
}
})
})
</script>
Ajax补充说明
主要是针对回调函数args接收到的响应数据
1.后端request.is_ajax()
用于判断当前请求是否由ajax发出
2.后端返回的三板斧都会被args接收不再影响整个浏览器页面
3.选择使用ajax做前后端交互的时候 后端一般返回的都是字典数据
user_dict = {'code': 10000, 'username': '小阳人', 'hobby': '哎呦喂~'}
# ajax自动反序列化后端的json格式的bytes类型数据
dataType:'json',
django内置序列化组件(drf前身)
'''前后端分离的项目 视图函数只需要返回json格式的数据即可'''
from app01 import models
from django.http import JsonResponse
def ab_ser_func(request):
# 1.查询所有的书籍对象
book_queryset = models.Book.objects.all()
# 2.封装成大字典返回
data_dict = {}
for book_obj in book_queryset:
temp_dict = {}
temp_dict['pk'] = book_obj.pk
temp_dict['title'] = book_obj.title
temp_dict['price'] = book_obj.price
temp_dict['info'] = book_obj.info
data_dict[book_obj.pk] = temp_dict # {1:{},2:{},3:{}}
return JsonResponse(data_dict)
序列化组件(django自带 后续学更厉害的drf)
# 导入内置序列化模块
from django.core import serializers
# 调用该模块下的方法，第一个参数是你想以什么样的方式序列化你的数据
res = serializers.serialize('json', book_queryset)
return HttpResponse(res)
批量操作数据
# bulk_create
def many_data(request):
# 循环插入10万条数据(频繁走数据库操作 效率极低 不推荐!!!)
# for i in range(100000):
# models.Books.objects.create(title=f'第{i}本书')
"""直接循环插入 10s 500条左右"""
'''批量插入'''
book_list = []
for i in range(100000):
# 先用类产生一个对象
book_obj = models.Book1(title=f'第{i}本书')
# 将对象追加到列表中
book_obj_list.append(book_obj)
# 批量数据插入
models.Book1.objects.bulk_create(book_obj_list)
"""使用orm提供的批量插入操作 5s 10万条左右"""
# 查询出所有的表中并展示到前端页面
book_queryset = models.Book1.objects.all()
return render(request, 'BkPage.html', locals())
分页器思路
分页器主要听处理逻辑 代码最后很简单
推导流程
1.queryset支持切片操作(正数)
2.研究各个参数之间的数学关系
每页固定展示多少条数据、起始位置、终止位置
3.自定义页码参数
current_page = request.GET.get('page')
4.前端展示分页器样式
5.总页码数问题
divmod方法
6.前端页面页码个数渲染问题
后端产生 前端渲染
以后可能很多地方都需要使用分页 不可能重复编写 所以封装成了模块
book_queryset = models.Books.objects.all()
# 支持切片操作
data_queryset = models.Books.objects.all()
# 获取查看页数
current_page_num = request.GET.get('page')
try:
current_page_num = int(current_page_num)
except Exception:
current_page_num = 1
# 设置每页展示数据
per_page_num = 10
# # 起始位置
start_num = (current_page_num - 1) * per_page_num
# # 结束位置
stop_num = current_page_num * per_page_num
# 前端渲染，页码数，和总数有关
show_num = 11
all_count = data_queryset.count()
page_num, more = divmod(all_count, per_page_num)
if more:
page_num += 1
html = ''
xxx = current_page_num
if current_page_num < 5:
xxx = 5
for i in range(xxx-5, xxx+6):
if current_page_num == i:
html += '<li class="active"><a href="?page=%s">%s</a></li>'%(i,i)
else:
html += '<li><a href="?page=%s">%s</a></li>'%(i,i)
book_queryset = data_queryset[start_num:stop_num]
return render(request,'many_data.html',locals())
自定义分页器的使用
django自带分页器模块但是使用起来很麻烦 所以我们自己封装了一个
只需要掌握使用方式即可
def ab_pg_func(request):
book_queryset = models.Books01.objects.all()
from app01.utils.mypage import Pagination
current_page = request.GET.get('page')
page_obj = Pagination(current_page=current_page, all_count=book_queryset.count())
page_queryset = book_queryset[page_obj.start:page_obj.end]
return render(request, 'pgPage.html', locals())
'''html'''
{% for book_obj in page_queryset %}
<p>{{ book_obj.title }}</p>
{% endfor %}
{{ page_obj.page_html|safe }}
# 前戏
编写一个校验用户名和密码是否合法的功能
前端需要自己编写获取用户数据的各种标签
前端需要自己想方设法的展示错误的提示信息
后端需要自己想方设法的编写校验代码(很多if判断)
def ab_from_func(request):
errors_dict = {'username': '', 'password': ''}
if request.method == 'POST':
username = request.POST.get('username')
password = request.POST.get('password')
if username == 'jason':
errors_dict['username'] = '用户名不能为jason'
if password == '123':
errors_dict['password'] = '密码不能为123'
return render(request, 'fromPage.html',locals())
'''html'''
<form action="" method="post">
<p>username:
<input type="text" name="username">
<span style="color: red">{{ errors_dict.username }}</span>
</p>
<p>password:
<input type="text" name="password">
<span style="color: red">{{ errors_dict.password }}</span>
</p>
<input type="submit">
</form>
# form组件
上面的三件事有一个组件可以一次性帮你搞定>>>:form组件
1.数据校验
2.标签渲染
3.展示信息
# 基本使用
from django import forms
class MyForm(forms.Form):
# 用户名至少三个字符最多八个字符
username = forms.CharField(min_length=3,max_length=8)
# 年龄最小不能小于0 最大不能超过150
age = forms.IntegerField(min_value=0,max_value=150)
# 邮箱必须符合邮箱格式(@关键符号)
email = forms.EmailField()
from app01 import views
# 1.判断数据是否全部符合要求
form_obj = views.MyForm({'username':'jason','age':18,'email':'123'})
form_obj.is_valid()
False # 只要有一个不符合结果都是False
# 2.获取符合校验条件的数据
form_obj.cleaned_data
{'username': 'jason', 'age': 18}
# 3.获取不符合校验规则的数据及原因
form_obj.errors
{'email': ['Enter a valid email address.']}
"""
1.form类中所有的字段数据默认都是必填的 不能少
如果想忽略某些字段 可以添加 required=False
2.form类中额外传入的字段数据不会做任何的校验 直接忽略
"""
