Ajax

Ajax

异步提交 局部刷新
'''
异步：提交任务之后不原地等待结果，任产生结果后通过异步回调机制返回结果
同步：提交任务之后原地等待结果，期间不做任何事
'''
Ajax页面案例：博客园注册页面，GitHub注册页面

能够发送网络请求的方法啊
a标签       get请求
form表单    get请求、post请求
ajax        get请求、post请求

Ajax不是一门独立的语言，而是一个功能
能够实现Ajax功能的书写方式有很多：原生js代码、jQuery封装代码、组件框架代码
目前只是学习jQuery版本

基本语法

$.ajax({
    url:'',  // 控制提交地址    规律与form标签的action参数一致
    type:'post',  // 控制请求方式
    data:{},  // 发送的数据
    dataType:'JSON',  // 自动反序列
    success:function (args) {
            // 异步回调函数
            alert(typeof args);
            console.log(args.username)
    }
})

参数补充

content Type ：前后端数据传输的格式
	application/x-www-form-urlencoded
	multipart/form-data
	application/json
    朝后端发送数据时，针对不同的发送方式方式后端有不同的处理方式
    
    # 1.form表单默认的是form-urlencoded格式
    	Django后端针对form-urlencoded格式的数据 会自动解析并封装到request.POST中
    	Django后端针对form-data格式的数据，会将文件自动封装到request.FILES中，普通符合form-urlencoded的数据会封装到request.POST中
    # 2.ajax 默认的也是form-urlencoded格式
    	# 2.1.发送json格式的数据
    	Django后端不会做任何处理，直接以二进制形式存放在request.body中
        data:JSON.stringify(data)
        contentTypr:'application/json'
    	# 2.2.ajax发送文件
    	// 1. 先生成一个内置对象
    	let formDataObj = new FormData();
        // 2. 添加urlencoded格式的普通键值对数据(非文件数据)
        formDataObj.append('name':'zsn')
        formDataObj.append('password':123)
        // 3.添加文件数据
        // 第一个参数放类似于input框的那么属性，第二个参数放文件对象
        formDataObj.append('myfile',$('#myfile')[0].files[0]);
        // ajax发送给后端
        $.ajax({
			url:'',  // 控制提交地址    规律与form标签的action参数一致
			type:'post',  // 控制请求方式
			data:formDataObj,  // 发送的数据
			// 额外指定两个参数
			contentType:false,  // 不采用任何编码 后端能够直接识别formData对象
			processData:false,  // 不处理formData对象 直接发送即可
			success:function (args) {
                    }
                })
        
dataType 
	Django后端如果使用jsonResponse给回调函数返回json格式字符串，回调函数会自动反序列化成js中的自定义对象
    Django后端如果不适用jsonResponse给回调函数返回json格式字符串，回调函数收到后不会自动反序列化
    设置了 dataType:'JSON' 后，回调函数无论哪种都会自动反序列化

Django内置序列化模块

from django.core import serializers
def ab_ser(request):
    book_queryset = models.Book.objects.all()
    res = serializers.serialize('json',book_queryset)
    return HttpResponse(res)

借助于插接完成二次确认弹框

先下载Bootstrap-sweetalert项目 https://github.com/lipis/bootstrap-sweetalert
导入dist中的css文件和js文件

 $("#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}, // 将id编号当数据传给后端，不用反向解析
                        success: function (data) {
                            if (data.code === 0) {
                                swal("删除成功!", "你可以准备跑路了！", "success");
                            } else {
                                swal("删除失败", "你可以再尝试一下！", "error")
                            }
                        }
                    })
                });
    })