第六章、ajax方法以及序列化组件

目录

• 第六章、ajax方法
  • 一、choice参数介绍
  • 二、MTV与MVC模型
  • 三、ajax方法
  • 四、案例
  • 五、Ajax传json格式的数据
  • 六、 AJAX传文件
    • 代码如下
    • ajax传文件需要注意的事项
    • contentType前后端传输数据编码格式
  • 七、序列化组件
  • 八、案例ajax + sweetalert(需要导入static文件)

第六章、ajax方法

一、choice参数介绍

存choice里面罗列的数字与中文对应关系，可用作为数据库表中的数据

​

二、MTV与MVC模型

Django的MTV分别是：

M 带包模型(model)
		负责业务对象和数据库的关系映射(ORM)
T 代表模板(template)
		负责如何把页面展示给用户(html)
V 代表视图 （view）
		负责业务逻辑 并在适当时候调用Model和Template
-----------------------------------------------------------------------------------------------------------
MVC 设计模型是一种使用 Model View Controller（ 模型-视图-控制器）设计创建 Web 应用程序的模式。
models（模型）：是应用程序中用于处理应用程序数据逻辑的部分。
　　　　通常模型对象负责在数据库中存取数据。
view（视图）：是应用程序中处理数据显示的部分。
　　　　通常视图是依据模型数据创建的。
controller（控制器）：是应用程序中处理用户交互的部分。
　　　　通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。

三、ajax方法

**两大特点：异步提交、局部刷新 **

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

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

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

​

四、案例

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

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

          html部分代码
       <input type="text" id="t1"> + <input type="text" id="t2"> = <input type="text" id="t3">
            <p>
                <button id="b1">计算</button>
            </p>

         <script>
            $('#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)
                }
            })
        })
        </script>

五、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'})

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

六、 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,  // 不用任何编码 因为formdata对象自带编码 django能够识别该对象
            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默认的提交数据的编码格式也是urlencoded
                    username=jason&password=123

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

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

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

七、序列化组件

序列化组件 serializers
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(需要导入static文件)

ajax + sweetalert(需要导入static文件)

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