day 62 choice 参数，MTV与MVC模型，ajax，序列化组件，ajax + sweetalert

choice 参数

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

from app01 import models
user_obj = models.Userinfo.objects.filter(pk=4).first()
print(user_obj.username)
print(user_obj.gender)
# 针对choices字段 如果你想要获取数字所对应的中文 你不能直接点字段
# 固定句式 数据对象.get_字段名_display() 当没有对应关系的时候 该句式获取到的还是数字
print(user_obj.get_gender_display())

record_choices = (('checked', "已签到"),
('vacate', "请假"),
('late', "迟到"),
('noshow', "缺勤"),
('leave_early', "早退"),
)
record = models.CharField("上课纪录", choices=record_choices, default="checked",

score_choices = ((100, 'A+'),
(90, 'A'),
(85, 'B+'),
(80, 'B'),
(70, 'B-'),
(60, 'C+'),
(50, 'C'),
(40, 'C-'),
(0, ' D'),
(-1, 'N/A'),
(-100, 'COPY'),
(-1000, 'FAIL'),
)
score = models.IntegerField("本节成绩", choices=score_choices, default=-1)

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

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

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




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

form表单 默认的提交数据的编码格式是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后端针对不同的编码格式数据 会有不同的处理机制以及不同的获取该数据的方法

序列化组件
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())

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

ajax + sweetalert

title: "你确定要删除吗？",
text: "删除可就找不回来了哦！",
type: "warning",
showCancelButton: true, // 是否显示取消按钮
confirmButtonClass: "btn-danger", // 确认按钮的样式类
confirmButtonText: "删除", // 确认按钮文本
cancelButtonText: "取消", // 取消按钮文本
closeOnConfirm: false, // 点击确认按钮不关闭弹框
showLoaderOnConfirm: true // 显示正在删除的动画效果

<script>
    $('.cancel').click(function () {
        var $btn = $(this);
        swal({
          title: "你确定要删吗?",
          text: "你要是删了,你就准备好跑路吧!",
          type: "warning",
          showCancelButton: true,
          confirmButtonClass: "btn-danger",
          confirmButtonText: "对,老子就要删!",
          cancelButtonText: "算了,算了!",
          closeOnConfirm: false,
            showLoaderOnConfirm: true
        },
        function(){
            $.ajax({
                url:'',
                type:'post',
                data:{'delete_id':$btn.attr('delete_id')},
                success:function (data) {
                    if (data.code==1000){
                        swal(data.msg, "你可以回去收拾行李跑路了.", "success");
                        // 1.直接刷新页面
                        {#window.location.reload()#}
                        // 2.通过DOM操作 实时删除
                        $btn.parent().parent().remove()
                    }else{
                        swal("发生了未知错误!", "我也不知道哪里错了.", "info");
                    }
                }
            });

        });
    })
</script>