1、初识Ajax
异步提交，局部刷新
比如GitHub的注册页面，动态获取用户名实时的跟后端确认并实时展示的前端(局部刷新)
向后端发送数据的方式：
1、form表单 get、post请求
2、a标签 get请求
3、浏览器地址栏输入url地址 get请求
4.Ajax get、post请求
AJAX 不是新的编程语言，而是一种使用现有标准的新方法(比较装饰器)
Ajax 的全称是 Asynchronous Javascript And XML（异步 JavaScript 和 XML）。
通俗的理解：在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式，就是Ajax。
"""
页面上有三个input框
在前两个框中输入数字 点击按钮 朝后端发送ajax请求
后端计算出结果 再返回给前端动态展示的到第三个input框中
(整个过程页面不准有刷新,也不能在前端计算)
"""
$('#btn').click(function () {
// 朝后端发送ajax请求
$.ajax({
// 1.指定朝哪个后端发送ajax请求
url:'', // 不写就是朝当前地址提交
// 2.请求方式
type:'post', // 不指定默认就是get 都是小写
// 3.数据
// {data:{'username':'jason','password':123},}
data:{'i1':$('#d1').val(),'i2':$('#d2').val()},
// 4.回调函数:当后端给你返回结果的时候会自动触发 args接受后端的返回结果
success:function (args) {
//{alert(args) // 通过DOM操作动态渲染到第三个input里面}
//{$('#d3').val(args)}
console.log(typeof args) // 获取的是string类型
}
})
})
"""
针对后端如果是用HttpResponse返回的数据 回调函数不会自动反序列化
如果后端直接用的是JsonResponse返回的数据 回调函数会自动反序列化
HttpResponse解决方式
1.自己在前端利用JSON.parse()
2.在ajax里面配置一个参数
"""
2、前后端传输数据编码格式
前后端传输数据的编码格式：urlencoded、formdata、json
post请求
1、form表单
- form表单默认的数据编码格式是urlencoded
- 数据格式:username=up&password=123
- django后端针对符合urlencoded编码格式的数据都会自动解析封装到request.POST中
- 如果把编码格式改成formdata，那么针对普通的键值对还是解析到request.POST中，而将文件解析到request.FILES中
- form表单是不能发送json格式数据的
2、ajax
- 默认的编码格式也是urlencoded
- 数据格式:username=up&age=20
- django后端针对符合urlencoded编码格式的数据都会自动解析封装到request.POST中
3、Ajax发送json格式数据
前提：前后端传输数据的时候一定要确保编码格式跟数据真正的格式是一致的
ajax发送json格式数据需要注意点
1.contentType参数指定成:application/json，data传输的数据JSON.stringify
2.数据是真正的json格式数据
3.django后端不会处理json格式数据需要你自己去request.body获取并处理
4、json.loads括号内如果传入了一个二进制格式的数据那么内部自动解码再反序列化
<script>
$('#d1').click(function () {
$.ajax({
url:'',
type:'post',
data:JSON.stringify({'username':'jason','age':25}),
contentType:'application/json', // 指定编码格式
success:function () {
}
})
})
</script>
后端：
json_bytes = request.body
json_str = json_bytes.decode('utf-8')
json_dict = json.loads(json_str)
# json.loads括号内如果传入了一个二进制格式的数据那么内部自动解码再反序列化
json_dict = json.loads(json_bytes)
request.is_ajax()
判断当前请求是否是ajax请求 返回布尔值
4、Ajax发送文件
ajax发送文件需要借助于js内置对象FormData
<script>
// 点击按钮朝后端发送普通键值对和文件数据
$('#d4').on('click',function () {
// 1 需要先利用FormData内置对象
let formDateObj = new FormData();
// 2 添加普通的键值对
formDateObj.append('username',$('#d1').val());
formDateObj.append('password',$('#d2').val());
// 3 添加文件对象
formDateObj.append('myfile',$('#d3')[0].files[0])
// 4 将对象基于ajax发送给后端
$.ajax({
url:'',
type:'post',
data:formDateObj, // 直接将对象放在data后面即可
// ajax发送文件必须要指定的两个参数
contentType:false, // 不需使用任何编码 django后端能够自动识别formdata对象
processData:false, // 告诉浏览器不要对你的数据进行任何处理
success:function (args) {
}
})
})
</script>
def ab_file(request):
if request.is_ajax():
if request.method == 'POST':
print(request.POST)
print(request.FILES)
return render(request,'ab_file.html')
"""
总结:
1.需要利用内置对象FormData
添加普通的键值对
formDateObj.append('username',$('#d1').val());
formDateObj.append('password',$('#d2').val());
添加文件对象
formDateObj.append('myfile',$('#d3')[0].files[0])
2.需要指定两个关键性的参数
contentType:false, 不需使用任何编码 django后端能够自动识别formdata对象
processData:false, 告诉浏览器不要对你的数据进行任何处理
3.django后端能够直接识别到formdata对象并且能够将内部的普通键值自动解析并封装到request.POST中 文件数据自动解析并封装到request.FILES中
"""
5、django自带的序列化组件
1、使用sqlite3数据库
2、先下载sqlite3驱动，方法与MySQL数据库一致
前后端分离的项目：只需要写代码将数据处理好，能够序列化返回给前端即可 ，再写一个接口文档 告诉前端每个字段代表的意思即可
# 需求:在前端获取到后端用户表里面所有的数据 并且要是列表套字典
import json
from django.http import JsonResponse
from django.core import serializers
def ab_ser(request):
user_queryset = models.User.objects.all()
# 自己转换
# [{},{},{},{},{}]
# user_list = []
# for user_obj in user_queryset:
# tmp = {
# 'pk':user_obj.pk,
# 'username':user_obj.username,
# 'age':user_obj.age,
# 'gender':user_obj.get_gender_display()
# }
# user_list.append(tmp)
# return JsonResponse(user_list,safe=False)
# return render(request,'ab_ser.html',locals())
# 序列化 自动转换格式 导入serializers
res = serializers.serialize('json',user_queryset)
"""会自动帮你将数据变成json格式的字符串 并且内部非常的全面"""
return HttpResponse(res)
"""
[
{"pk": 1, "username": "upup", "age": 25, "gender": "male"},
{"pk": 2, "username": "ggg", "age": 31, "gender": "female"},
{"pk": 3, "username": "ppp", "age": 32, "gender": "others"},
{"pk": 4, "username": "qqq", "age": 40, "gender": 4}
]
[
{ "model": "app01.user",
"pk": 1,
"fields": {"username": "upup", "age": 25, "gender": 1}},
{ "model": "app01.user",
"pk": 2,
"fields": {"username": "ggg", "age": 31, "gender": 2}},
{ "model": "app01.user",
"pk": 3,
"fields": {"username": "ppp", "age": 32, "gender": 3}},
{ "model": "app01.user",
"pk": 4,
"fields": {"username": "qqq", "age": 40, "gender": 4}}
]
写接口就是利用序列化组件渲染数据然后写一个接口文档
"""
6、Ajax和sweetalert
网址：http://lipis.github.io/bootstrap-sweetalert/
<script>
$('.del').on('click',function () {
// 先将当前标签对象存储起来
let currentBtn = $(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:'/delete/user/' + currentBtn.attr('delete_id'), // 1 传递主键值方式1#}
url:'/delete/user/', // 2 放在请求体里面
type:'post',
data:{'delete_id':currentBtn.attr('delete_id')},
success:function (args) { // args = {'code':'','msg':''}
// 判断响应状态码 然后做不同的处理
if(args.code === 1000){
swal("删了!", args.msg, "success");
// 1.lowb版本 直接刷新当前页面
{#window.location.reload()#}
// 2.利用DOM操作 动态刷新
currentBtn.parent().parent().remove()
}else{
swal('完了','出现了位置的错误','info')
}
}
})
} else {
swal("算了", "算了", "error");
}
});
})
</script>
批量插入数据
效率低下：
def ab_pl(request):
# 先给Book插入一万条数据
# for i in range(10000):
# models.Book.objects.create(title='第%s本书'%i)
# # 再将所有的数据查询并展示到前端页面
book_queryset = models.Book.objects.all()
可以使用orm提供的bulk_create能够大大的减少操作时间
def ab_pl(request):
# 批量插入
book_list = []
for i in range(100000):
book_obj = models.Book(title='第%s本书'%i)
book_list.append(book_obj)
models.Book.objects.bulk_create(book_list)
return render(request,'ab_pl.html',locals())