django进阶版1

目录

• 字段中choice参数
• MTV与MVC模型
• AJAX(*********)
  • Ajax普通请求
  • Ajax传json格式化数据
  • Ajax传文件
• 序列化组件
• Ajax+sweetalert

字段中choice参数

choices=((1,'male'),(2,'female'),(3,'other'))
gender=models.IntegerField(choices=choices)

这样就设置了choice参数，在取值时我们可以这样取

from app01 import models
user_obj=models.Userinfo.objects.filter(pk=4).firse()
print(user_obj.username)
print(user_obj.get_gender_display())

针对choices字段 如果你想要获取数字所对应的中文 你不能直接点字段

固定句式 数据对象.get_字段名_display() 当没有对应关系的时候 该句式获取到的还是数字

MTV与MVC模型

​ django号称是MTV框架,其实他还是MVC框架

​ MTV：

​ M：models

​ T: templates

​ V: views

​ MVC：

​ M：models

​ V: views

​ C: contronner(路由匹配)

AJAX(*********)

异步提交

同步异步：描述的任务的提交方式

同步:提交任务之后 原地等待任务的返回结果 期间不干任何事儿

异步:提交任务之后 不愿地等待 直接执行下一行代码 任务的返回通过回调机制

局部刷新

​ 一个页面，不是整体刷新，而是页面的某个地方局部刷新

Ajax是一门js的技术 基于原生js开发的，但是用原生的js写代码过于繁琐

我们在学的时候 只学如何用jQuery实现ajax

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

Ajax普通请求

展示一个前端页面 页面上有三个输入框 前两个框输入数字 点击按钮朝后端发请求

页面不刷新的情况下 完成数字的加法运算

<input type="text" id="t1">+<input type="text" id="t2">=<input type="text" di="t3">
<p>
	<button id="b1">计算</button>
</p>

$('#b1').on('click',function(){
    $ajax({
        url:'',//提交数据的地址，没有则朝当前地址提交
		type：'post',//请求的方式
		data:{'t1':$('#t1').val(),'t2':$('#t2').val()},//发送的数据
		success:function(data){//data形参指代的就是异步提交的返回结果，通过DOM操作将内容渲染到标签内容上
			$('#t3').val(data)
		}
    })
})

Ajax传json格式化数据

django后端准对json格式的数据，不会自动帮你解析，会原封不动的给你放到request.body中，你可以手动处理获取数据

json_bytes=request.body
json_str=str(json_bytes,encoding='utf-8')
json_dict=json.loads(json_str)

注意点：

1.指定contentType参数

contentType:'application/json',

2.要将你发送的数据确保是json格式的

data:JSON.stringify({'username':'jason','password':'123'})

Ajax传文件

需要利用内置对象Formdata

该对象既可以传普通的值，也可以传文件

# 获取input获取用户上传文件的文件的内容
        // 1.先通过jquery查找到该标签
        // 2.将jquery对象转换成原生的js对象
        // 3.利用原生js对象的方法 直接获取文件内容
        $('#t3')[0].files[0]

        $('#b1').click(function () {
        // 1.先生成一个formdata对象
        var myFormData = new FormData();
        // 2.朝对象中添加普通的键值
        myFormData.append('username',$("#t1").val());
        myFormData.append('password',$("#t2").val());
        // 3.朝对象中添加文件数据
        // 1.先通过jquery查找到该标签
        // 2.将jquery对象转换成原生的js对象
        // 3.利用原生js对象的方法 直接获取文件内容
        myFormData.append('myfile',$('#t3')[0].files[0]);
        $.ajax({
            url:'',
            type:'post',
            data:myFormData,  // 直接丢对象

            // ajax传文件 一定要指定两个关键性的参数
            contentType:false,  // 不用任何编码 因为formdata对象自带编码 django能够识别该对象
            processData:false,  // 告诉浏览器不要处理我的数据 直接发就行

            success:function (data) {
                alert(data)
            }
        })
    })
    """
    ajax传文件需要注意的事项
        1.利用formdata对象 能够简单的快速传输数据 (普通键值 + 文件)
        2.有几个参数
            data:formdata对象

            contentType:false
            processData:false

    """

    contentType前后端传输数据编码格式

        form表单 默认的提交数据的编码格式是urlencoded
            urlencoded
                username=admin&password=123这种就是符合urlencoded数据格式

                django后端针对username=admin&password=123的urlencoded数据格式会自动解析
                将结果打包给request.POST 用户只需要从request.POST即可获取对应信息

            formdata
                django后端针对formdata格式类型数据 也会自动解析
                但是不会方法request.POST中而是给你放到了request.FILES中

        ajax  ajax默认的提交数据的编码格式也是urlencoded
            username=jason&password=123

        总结:django后端针对不同的编码格式数据 会有不同的处理机制以及不同的获取该数据的方法

    """
    前后端在做数据交互的时候 一定一定要表明你所发的的数据到底是什么格式

    前段后交互 你不能骗人家
    你的数据时什么格式 你就应该准确无误告诉别人是什么格式
    """

序列化组件

将用户表的数据查询出来返回给前端

给前端的是一个大字典，字典里面的数据是一个小小的字段

 	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())

Ajax+sweetalert

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")
                            }
                        }
                    })
                });
    })