day43.框架设计模型和Ajax

框架设计模型(MTV与MVC)

MTV
	M:models 模型层
    T:templates 模板层
    V:Views	视图层
MVC
	M:models 模型层
    V:views	视图层
    C:controller 控制层
django框架自称是MTV	其实本质也是MVC

Ajax

异步提交 局部刷新
"""
同步:提交任务之后原地等待任务结果期间不做任何事
异步:提交任务之后不原地等待任务结果 等任务产生结果通过异步回调机制
"""
前戏页面
	博客园注册页面
    github注册页面
 
能够发送网络请求的方法
	a				get请求
    form表单		   get请求、post请求
    ajax              get请求、post请求
 
ajax不是一门独立的语言 而是一个功能
	能够实现ajax功能的书写方式有很多 
    	eg:原生js代码 jQuery封装代码 组件框架代码...
    我们这里学习jQuery版本
 
ajax前戏
	需求:保证页面不刷新的情况下完成数字的和

基本语法

// ajax发送给后端
$.ajax({
            url:'',  // 控制提交地址    规律与form标签的action参数一致
            type:'post',  // 控制请求方式
            data:{'i1':i1Val,'i2':i2Val},  // 发送的数据
            success:function (args) {
                    // 异步回调函数
                    {#alert(args)#}
                    // 查看input框并且写入数据
                    $('#i3').val(args)
            }
        })

参数补充

contentType
	前后端数据传输格式主要有三种
    	application/x-www-form-urlencoded
		multipart/form-data
         application/json
    朝后端发送数据的时候针对不同的方式后端有不同的处理措施
    
    # form表单默认是urlencoded编码格式
    数据格式username=jason&password=234
    django后端针对符合urlencoded格式的数据会自动解析并封装到request.POST中
    django后端针对form-data格式的数据文件自动封装到request.FILES中 普通的符合urlencoded还是封装到request.POST中
    
    # ajax默认是urlencoded编码格式
		1.ajax发送json格式数据
        	django后端不做任何处理 直接以二进制形式存放在request.body中
            data
            contentType
         2.ajax发送文件数据
        	$('#d1').on('click',function () {
                // 1.先生成一个内置对象
                let formDataObj = new FormData();
                // 2.添加符合urlencoded格式的普通键值对数据
                formDataObj.append('name','jason');
                formDataObj.append('password',123);
                // 3.添加文件数据
                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模块序列化的数据 回调函数接收到之后不会自动反序列

django内置序列化模块

from django.core import serializers
def ab_ser(request):
    book_queryset = models.Book.objects.all()
    # 自己构造字典
    # book_list = []
    # for book_obj in book_queryset:
    #     book_list.append({'title':book_obj.title,
    #                       'price':book_obj.price,
    #                       'publish_time':book_obj.publish_time
    #                       })
    # res = json.dumps(book_list)
    # return render(request,'ab_ser.html',locals())
    res = serializers.serialize('json',book_queryset)
    return HttpResponse(res)

基于ajax实现二次确认

<script>
        $('.del_link').on('click',function (a) {
            var $aEle = $(this);
            var deleteId = $(this).attr('delete_id');
            // 提示二次确认
            res = confirm('你确定真的要删吗?');
            // 判断是否删除
            if (res){
                // 发送ajax请求
                $.ajax({
                    url:"/book_delete/" + deleteId,
                    type:'get',
                    data:{},
                    success:function (args) {
                        // 1.页面刷新  不推荐使用
                        window.location.reload();
                        // 2.DOM操作   正规 用户体验好
                        $aEle.parent().parent().remove()
                    }
                })
            }else{
                alert('怂逼不敢删啦')
            }
        })
</script>