1简介
"""
异步提交
局部刷新
AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
"""
例子:github注册
动态获取用户名,实时传给后端确认并将结果返回给前端
前端像后端发送请求的方式:
1.浏览器地址栏
2.a标签
3.form表单
4.ajax
我们只学习jQuery封装之后的ajax,不学习原装的。
不只有jQuery能实现ajax,其它框架也可以。但原理是相同的,只是语法区别。
2基本语法
以实现计算为例
"""""""""""""""""""""""""""前端:"""""""""""""""""""""""""""
$('#btn').click(function () {
d1 = $('#d1').val()
d2 = $('#d2').val()
$.ajax({
// 1. 路由
url:'',
// 2. 设置提交方式,小写,默认是'get'
type:'post',
// 3. 向后端提交数据
data:{'d1':d1,'d2':d2},
// 4. 前端自动将后端HttpResponse返回的数据进行反序列化,可以不写
dataType: 'JSON',
// 5. 指定编码格式为json,默认是urlencoded
// contentType:'application/json', // data 数据也要改为json格式
// 6. 异步回调函数
success:function (args) {
// args为后端返回的数据(后端无论返回什么,都会给args,包括直接返回网页)
// 后端JsonResponse返回给前端的数据会自动进行反序列化
$('#d3').val(args.d3)
}
})
})
# 上面1,2,3,6是通常必写的,其它的视情况添加
""""""""""""""""""""""""""后端:""""""""""""""""""""""""""
def home(request):
if request.is_ajax():
d1 = request.POST.get('d1')
d2 = request.POST.get('d2')
d3 = int(d1) + int(d2)
data ={'d3':d3,}
# JsonResponse返回给前端的数据会自动进行反序列化
# 手动Json,再HttpResponse的数据要手动在前端进行反序列化
return JsonResponse(data)
return render(request,'home.html')
3前端传输数据的编码格式
"""
get请求是独立的,不研究;下面说的都是post请求。
"""
# 1.前端传输数据的3种方式
urlencoded
formdata
json
# 2.form表单
默认是urlencoded
格式:?d1=1$d2=2
django后端会自动将符合urlencoded格式的数据解析封装到request.POST中
如果将编码格式改为formdata(form表单上传文件时用),普通键值对还是解析封装到request.POST中;文件解析到request.FILES中
form表单不支持json格式
# 3.ajax
默认是urlencoded
格式:?d1=1$d2=2
django后端会自动将符合urlencoded格式的数据解析封装到request.POST中
4ajax发送json格式数据
"""前端设置"""
指定编码格式为json,默认是urlencoded
contentType:'application/json', # 修改编码格式时数据格式也要对应的修改,保持一致
"""后端解析"""
django针对json格式的数据不会做任何处理,要自己手动处理。
json格式的数据会以2进制的形式存放在request.body中,所以:
1.解码
2.反序列化
# json.loads()内部会自动识别2进制,将其解码,故以上2步可以省略为反序列化这一步。
5ajax发送文件数据
"""前端设置"""
$('#btn').click(function () {
// 1.实例化,获得formdata对象,用于存放数据
var fordata_obj=new FormData();
// 2.添加普通数据
// fordata_obj.append('键','值')
// 3.添加文件
fordata_obj.append('file',$('#d4')[0].files[0]) //后面是文件对象
$.ajax({
url:'',
type:'post',
// 区别之处
data:fordata_obj, // 直接放formdata对象
contentType:false, // 不使用任何编码,django后端能自动识别formdata对象
processData:false, // 告诉浏览器不对数据做任何处理
success:function (args) {
pass
}
})
})
# 前端要借助formdata对象存放数据,分为3步
"""后端接收"""
django后端能自动识别都formdata对象,并将普通键值对解析封装到request.POST中;文件解析到request.FILES中。
6django自带的序列化组件(drf的铺垫)
"""
在前后端分离的开发中,通过组件,我们将获取到的queryset对象转化成特定的格式(列表套字典),再将其发送给前端。配上一份数据说明表就行了。
"""
from django.core import serializers # 导模块
user_queryset = models.User.objects.all() # 获取数据
res = serializers.serialize('json',user_queryset) # 返回特定格式的数据,直接发送给前端
7ajax结合sweetalert实现删除的二次确认
sweetalert是一个类似于bootstrap的东西,也有2个文件,用于产生不同样式的弹窗。