AJAX

choice参数

用户性别
用户学历
用户工作状态
客户来源
...

class Userinfo(models.Model):
    username = models.CharField(max_length=32)
    password = models.IntegerField(default=123)
    choices = (
        (1,'male'),
        (2,'female'),
        (3,'others')
    )
    gender = models.IntegerField(choices=choices)
    """
    1.如果我存的是上面元组中数字会怎么样
    2.如果我存的数字不在元组范围内又会怎样
        1.数字没有对应关系 是可以存的
        2.不在范围内也会显示,但无意于
    """

    if __name__ == "__main__":
        os.environ.setdefault("DJANGO_SETTINGS_MODULE", "day62.settings")
        import django
        django.setup()
        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())

        
例子:
    1.
        record_choices = (('checked', "已签到"),
                      ('vacate', "请假"),
                      ('late', "迟到"),
                      ('noshow', "缺勤"),
                      ('leave_early', "早退"),
                      )
        record = models.CharField("上课纪录", choices=record_choices, default="checked"
    
            
     2.   
        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（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

异步提交

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

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

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

阻塞非阻塞:程序的运行状态

常见应用场景

局部刷新:

例如注册时候的用户名的查重。

当文件框发生了输入变化时，使用AJAX技术向服务器发送一个请求，然后服务器会把查询到的结果响应给浏览器，最后再把后端返回的结果展示出来。

• 整个过程中页面没有刷新，只是刷新页面中的局部位置而已！
• 当请求发出后，浏览器还可以进行其他操作，无需等待服务器的响应！

AJAX优缺点

优点：

1.最大的优点就是页面无需刷新，在页面内与服务器通信，非常好的用户体验。
2.使用异步的方式与服务器通信，不需要中断操作。
3.可以把以前服务器负担的工作转嫁给客户端，减轻服务器和带宽，可以最大程度减少冗余请求。
4.基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

缺点：

1.AJAX干掉了Back和History功能，即对浏览器机制的破坏。
在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现。
2.安全问题技术同时也对IT企业带来了新的安全威胁，ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等。
3.对搜索引擎的支持比较弱。如果使用不当，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)
                }
            })
        })
            

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

    """
    前后端在做数据交互的时候 一定一定要表明你所发的的数据到底是什么格式
    
    前段后交互 你不能骗人家
    你的数据时什么格式 你就应该准确无误告诉别人是什么格式   
    """

序列化组件

Django内置的serializers

什么意思呢？就是我的前段想拿到由ORM得到的数据库里面的一个个用户对象，我的后端想直接将实例化出来的数据对象直接发送给客户端，那么这个时候，就可以用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

$("#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.上述的样式类部分渲染的样式来自于bootstrap中，所有建议在使用上述样式时，将bootstrap的js和css也导入了，这样的情况下，页面效果就不会有任何问题

2.弹出的上述模态框中，可能字体会被图标掩盖一部分，可通过调整字体的上外边距来解决