Ajax相关
Ajax
Ajax的特性可以实现异步提交与局部刷新。
Ajax是一门js的技术 基于原生js开发的，但是用原生的js写代码过于繁琐， 我们在学的时候 只学如何用jQuery实现ajax。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
异步提交
同步异步：描述的任务的提交方式
同步:提交任务之后 原地等待任务的返回结果 期间不干任何事儿
异步:提交任务之后 不愿地等待 直接执行下一行代码 任务的返回通过回调机制
局部刷新
一个页面 不是整体刷新 而是页面的某个地方局部刷新
实例
1.展示一个前端页面 页面上有三个输入框 前两个框输入数字 点击按钮朝后端发请求
页面不刷新的情况下 完成数字的加法运算
方法1：不用JSON
前端：
<input type="text" id="t1"> +
<input type="text" id="t2"> =
<input type="text" id="t3">
<input type="submit" id="b1">
<script>
$('#b1').on('click', function () {
$.ajax({
// 1.朝后端发送数据的地址，空即为当前地址
url: '', //提交的目标地址
//2. 发送的请求方式
type: 'post',
//3 发送的数据
data: {'t1': $('#t1').val(), 't2': $('#t2').val()},
success: function (data) {
//由于ajax是异步提交，所以需要一个回调函数，在提交的结果返回到时执行
//这里的data是views那边返回的结果
$('#t3').val(data)
}
})
})
</script>
后端：
class Ajax(View):
def post(self, request):
if request.is_ajax():
t1 = request.POST.get('t1')
t2 = request.POST.get('t2')
res = int(t1) + int(t2)
return HttpResponse(res)
def get(self, request):
return render(request, 'ajax.html')
方法二：JSON交互数据
前端：
<input type="text" id="t1"> +
<input type="text" id="t2"> =
<input type="text" id="t3">
<input type="submit" id="b1">
<script>
$('#b1').on('click', function () {
$.ajax({
// 1.朝后端发送数据的地址，空即为当前地址
url: '', //提交的目标地址
//2. 发送的请求方式
type: 'post',
//发送数据的格式
contentType:'application/json',
//3 发送的数据
data: JSON.stringify({'t1': $('#t1').val(), 't2': $('#t2').val()}),
success: function (data) { //这里的data是views那边返回的结果
$('#t3').val(data)
}
})
})
</script>
后端：
class Ajax(View):
def post(self, request):
if request.is_ajax():
json_bytes=request.body
json_str=json_bytes.decode('utf8')
json_dic=json.loads(json_str)
print(json_dic,type(json_dic))
res=int(json_dic.get('t1'))+int(json_dic.get('t2'))
return JsonResponse(res,safe=False)
注：
form表单的默认的提交数据的编码格式是urlencoded（username=admin&password=123）
django后端针对username=admin&password=123的urlencoded数据格式会自动解析，然后将结果打包给request.POST 用户只需要从request.POST即可获取对应信息。
传输文件时django后端针对formdata格式类型数据 也会自动解析，但是不会方法request.POST中而是给你放到了request.FILES中。
总结:django后端针对不同的编码格式数据 会有不同的处理机制以及不同的获取该数据的方法
ajax传文件
//传文件
//1生成一个formdata对象
var MyFormData=new FormData()
//2往对象中添加键值对
MyFormData.append('username',$('#t1').val())
MyFormData.append('pwd','123')
// jquer查找上传文件的标签 $('#t3')
//jquery转换成js对象 $('#t3')[0]
// js对象.files取到的是一个容器，取第一个 $('#t3')[0].files[0]
MyFormData.append('file',$('#t3')[0].files[0])
//然后设置ajax
$.ajax({
url:'',
type:'post',
//ajax传文件必须设定2个false
contentType:false, //不需要任何编码，fromdata自带编码，django能识别该对象
processData:false,//告诉浏览器不需要处理该数据
data:MyFormData //数据直接丢对象进去
sueccess:function (data) {
//回调函数
}
})
序列化组件
1.将用户表的数据 查询出来 返回给前端
给前端的是一个大字典 字典里面的数据的一个个的字段
from django.core import serializers
def ser(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 = serializers.serialize('json',user_queryset)
print(res)
return render(request,'ser.html',locals())
sweetalert+ajax
ajax + sweetalert
$("#b55").click(function () {
swal({
title: "你确定要删除吗？",
text: "删除可就找不回来了哦！",
type: "warning",
showCancelButton: true, // 是否显示取消按钮
confirmButtonClass: "btn-danger", // 确认按钮的样式类
confirmButtonText: "删除", // 确认按钮文本
cancelButtonText: "取消", // 取消按钮文本
closeOnConfirm: false, // 点击确认按钮不关闭弹框
showLoaderOnConfirm: true // 显示正在删除的动画效果
},
function () {
var deleteId = 2;
$.ajax({
url: "/delete_book/",
type: "post",
data: {"id": deleteId},
success: function (data) {
if (data.code === 0) {
swal("删除成功!", "你可以准备跑路了！", "success");
} else {
swal("删除失败", "你可以再尝试一下！", "error")
}
}
})
});
})
