Blueherb In solitude, where we are least alone

day62

choice参数

class Userinfo(models.Model):
    username = models.CharField(max_length=32)
    choices = (
        (1,'male'),
        (2,'female'),
        (3,'others')
    )
    gender = models.IntegerField('性别',choices=choices)
    # 针对choices字段 如果你想要获取数字所对应的中文 你不能直接点字段
    # 固定句式   数据对象.get_字段名_display()  当没有对应关系的时候 该句式		获取到的还是数字
    print(user_obj.gender) # 1
    print(user_obj.get_gender_display()) # male

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 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
(这一特点给用户的感受是在不知不觉中完成请求和响应过程)

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

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

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

2.前后端传输数据编码格式

form表单的编码格式 (默认的提交数据的编码格式是urlencoded)
	1.urlencoded(只可以发普通键值)
        username=admin&password=123这种就是符合urlencoded数据格式
        django后端针对username=admin&password=123的urlencoded数据格式会自动解析
        将结果打包给request.POST 用户只需要从request.POST即可获取对应信息
       
    2.form-data(既可以发文件也可以发普通键值)
        django后端针对formdata格式类型数据 也会自动解析
        但是不会方法request.POST中而是给你放到了request.FILES中

3.Ajax传json格式数据

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

f  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':'bjl','password':'123'})

4.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
   
"""

ajax + sweetalert

sweetalert下载地址: github.com/lipis/bootstrap-sweetalert
把dist复制到文件夹下(别忘了settins里的静态文件配置)

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


posted @ 2019-10-28 19:13  奏乐乐章  阅读(96)  评论(0编辑  收藏  举报