Python Day 56 Django框架学习、学生管理系统迭代二、前后端交互数据传输方式、前台两种跳转方式、form表单详解

　　##单表删除功能添加确认弹出框

#注意：如果想要绑定多个相同的标签的时候， 不要用id选择器， 要用class类别选择器

#方式一：行间试
html:
    {#   a标签提交数据只能通过GET提交，所以删除或者更新我们想要携带数据只能通过?在后面进行拼接   #}
    <!--如果onclick是true的话，会执行跳转， 如果是False的 话， 阻止跳转-->
    <a href="/del_teacher/?id={{ item.id }}" onclick="return del()">删除|</a>
js：
        function del(){
    res = window.confirm('是否确认删除？');
    return res; // true / false
}



#方式二：内联式（推荐使用）
html:
    <a href="https://www.baidu.com" class="mya">点击</a>
js（注释：可以使用js也可以使用jq）:
    原生js：
        var a = document.getElementByClassName('mya') ;
        // console.log(a);
        a.onclick = function () {
            res = window.confirm('是否确认删除？');
            return res;
        }
    jquery：
        $('.mya').click(fucntion(){
            res = window.confirm('是否确认删除？');
            return res;
        })
        

 　　##前后端交互使用ajax补充一

前端： 
    模态对话框 （css + js）
    提交的时候， 偷偷的向后台发送ajax请求 （http协议）
    
    $.ajax({
        type : 'POST',
        url  : '/xxxxx/',
        data : {"username":'icon', "age":18},
        sucess : function(data){
            console.log(data);
        }
    });
    
    
后端：
    username = request.POST.get('username')
    age  =  request.POST.get('age')
    
    if username:
        ret = {"username":'icon'}
        
        return HttpResponse(json.dumps(ret))  ## 只能接受字符串
    else:
        return HttpResponse('nook')

　　##前后端交互使用ajax补充二

#前后台交互的时候， 必须使用json格式数据

#第一种方式交互：
    后台返回的格式：
        res["code"] = 10000
        res['data'] = "success"

        return HttpResponse(json.dumps(res))
    
    
    前台js反序列化：
        // js反序列化:
        console.log(data);
        res = JSON.parse(data);
        
    前台js的序列化：
        JSON.stringify(res)
        
    前台跳转两种方式：
        widnow.location.href = '/classes/';
        window.location.reload();  # 刷新当前页面

#第二种方式：
    
    后台返回的格式：
        res["code"] = 10000
        res['data'] = "success"
        
        return JsonResponse((res))  ### 相当于使用了json.dumps()
    
    前台：
        console.log(data) ## data 已经反序列化好的字典

 　　##form表单详解

#1、form表单
form是一个复杂的系统标签，其内部又可包含很多的一些输入标签
例如input 输入文本标签  checkbox 多选标签等等
form表单有几个属性我们需要注意一下
　　1：action属性，里面写的是url链接，接就是表单提交的地址
　　2：method属性，里面写的是数据提交的方式，可以写入get或者post
　　3：enctype属性，提交数据的编码格式

#2、form表单中的标签的前后台交互
form表单被我们应用在前后台交互的环节的，里面的值可以在后台通过某些key取出来
下面就来讲解不同标签取值的方法
1. input 标签 
input标签我们最为常见，里面有三个属性比较重要
　　a. type 他是代表input的类型
　　b. name 他就是后台取值的依据(key)
　　c. val 他是我们输入的值，也是后台需要的值
　　<input type="" name=""> 
然后我们根据type的类型，又可以把input进行细分
　　a. text 表示普通的文本，明文输入
　　b. password 输入的也是文本，密文输入
　　c. number 输入的是数字，不是数字不让输入
　　d. submit 提交按钮，提交form表单的内容
　　e. button 普通的按钮
　　f. radio 单选框，我们需要注意的是单选框的所有的name值必须相同
　　　　　　如果name不相同，就说明不在同一个选择方位，也就不存在单选，然后想要在后台取到他的值，
　　　　　　你必须在定义的时候给附上一个值给value，这样才能取到值
　　g. checkbox 复选框，内容和单选框一样
　　h. file 选择文件，可以选择文件提交给后台
　　i. hidden 隐藏输入框
以上基本是input的所有类型，需要注意几个点
　　1.取值都是通过name进行取值，所以必须给name赋值
　　2.文本类型想要附上初始值，直接在value中加入值就可以
　　3.选择框如果想要默认选中谁，那就在谁的标签中加入checked属性
2. select 标签
select标签是一个下拉框的形式让用户进行选择选项
所以select标签中必须包含option标签才能显示属性
形式为：
<select>
<option></option>
<option></option>
</select>
然后select中有全局属性name，这个name是后台又来进行取值的
每个option标签的文本内容是显示给用户看的，我们需要取的是option标签中的value属性，所以在开始必须给option的value赋值
后台通过select的name取值，直接取到的就是对应option的value
如果我们向让他默认选择某个option，可以在option标签中加入selected属性，如果都不加，默认是显示第一个
3. button 按钮标签
新出的标签，与input中type为button的按钮一样
4. textarea 文本框标签
与input中的text一样都是输入文本的，但是textarea标签没有字数的限制，并且输入框可以拖拉。
<textarea name="memo" id="memo" cols="30" rows="10">
  默认内容
</textarea>
属性说明：name：名称 rows：行数 cols：列数 disabled：禁用

5.lable标签
定义：<label> 标签为 input 元素定义标注（标记）
说明：
   1、label 元素不会向用户呈现任何特殊效果。
   2、<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。