第三阶段：Django框架 day62 Django--模型的部分知识及ajax的后端应用

模型的部分知识及ajax的后端应用

目录

• 一、models中的choice参数
• 二、MTV与MVC模型(了解知识点)
• 三、ajax(django中的重要知识点)
  • 3.1 ajax的相关知识点
  • 3.2 Ajax传json格式数据
  • 3.3 Ajax传文件
  • 3.4 contentType前后端传输数据编码格式
  • 3.5 ajax小练习
• 四、序列化组件

一、models中的choice参数

在使用数据库的时候，当我们要存入的数据字段的值具有一定的重复性和规律的时候这个时候我们可以用数值型代替 以此来节省存储空间，避免浪费。然后当我们用数值代替我们实际要存入的数据的时候会出现当数值多了不知道对应关系，这样前端开发在拿到数据的时候并不清楚该怎么去渲染，这个时候我们就可以用choice参数来实现这个功能。

具体用法：

# 例如我们要存入的是一个性别字段的时候就可以这样用，先在models中建立class的时候可以这样操作
choices = (
        (1,'male'),
        (2,'female'),
        (3,'others')
        )  # 定义一个元组套元组，里面的元组中的第一个值是我们要存入表中的，后面对应的值是我们实际要显示的内容
gender = models.IntegerField(choices=choices)

这样就可以实现我们想要的效果了，这样用 的话，当我们存的数字不在元组范围的时候数字没有对应关系 也是可以存进表中，并不会拦截 不给创建记录

而那我们取的时候应该怎么取呢，如果按照常规的先查询出数据对象，然后通过点句式来查只会查到这记录真正存入表中的信息（1,2,3）这种，那怎么取出该数值对应中文信息呢？

django给我们提供了固定句式：数据对象.get_字段名_display() 需要注意的是：当没有对应关系的时候 该句式获取到的还是数字

二、MTV与MVC模型(了解知识点)

MTV与MVC模型
django号称是MTV框架,其实他还是MVC框架
MTV：
M：models
T: templates
V: views
MVC：
M：models
V: views
C: contronner(路由匹配)

三、ajax(django中的重要知识点)

3.1 ajax的相关知识点

​ 异步提交

    同步异步：描述的任务的提交方式
        同步:提交任务之后 原地等待任务的返回结果 期间不干任何事儿
        异步:提交任务之后 不愿地等待 直接执行下一行代码 任务的返回通过回调机制

    阻塞非阻塞：程序的运行状态
        程序运行的三状态图

​ 局部刷新

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

1. Ajax是一门js的技术 基于原生js开发的，但是用原生的js写代码过于繁琐，这里介绍的是如何用jQuery实现ajax
2. AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
   （这一特点给用户的感受是在不知不觉中完成请求和响应过程）

小案例：

实现：展示一个前端页面 页面上有三个输入框 前两个框输入数字 点击按钮朝后端发请求
要求：页面不刷新的情况下 完成数字的加法运算

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

    $('#b1').on('click',function () {
    // 朝后端提交post数据
    $.ajax({
        // 1.到底朝后端哪个地址发数据
        url:'',  // 专门用来控制朝后端提交数据的地址  不写默认就是朝当前地址提交
        // 2.到底发送什么请求
        type:'post',  // 专门制定ajax发送的请求方式
        // 3.发送的数据到底是什么
        data:{'t1':$('#t1').val(),'t2':$('#t2').val()},
        // 4.异步提交的任务 需要通过回调函数来处理
        success:function (data) {  // data形参指代的就是异步提交的返回结果
            // 通过DOM操作将内容 渲染到标签内容上
            $('#t3').val(data)
        }
    })
})

3.2 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'})

3.3 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)
        }
    })
})

注意事项：

​ 1.利用formdata对象 能够简单的快速传输数据 (普通键值 + 文件)
​ 2.有几个参数需要修改
data:formdata对象
​ contentType:false
​ processData:false

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

​ 1.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中

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

总结：django后端针对不同的编码格式数据 会有不同的处理机制以及不同的获取该数据的方法
前后端在做数据交互的时候 一定一定要表明你所发的的数据到底是什么格式

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

四、序列化组件

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