django進階版1

目錄

• 字段中choice參數
• MTV與MVC模型
• AJAX(*********)
  • Ajax普通請求
  • Ajax傳json格式化數據
  • Ajax傳文件
• 序列化組件
• Ajax+sweetalert

字段中choice參數

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

這樣就設置了choice參數，在取值時咱們能夠這樣取

from app01 import models
user_obj=models.Userinfo.objects.filter(pk=4).firse()
print(user_obj.username)
print(user_obj.get_gender_display())

針對choices字段 若是你想要獲取數字所對應的中文 你不能直接點字段

固定句式 數據對象.get_字段名_display() 當沒有對應關係的時候 該句式獲取到的仍是數字

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" di="t3">
<p>
    <button id="b1">計算</button>
</p>

$('#b1').on('click',function(){
    $ajax({
        url:'',//提交數據的地址，沒有則朝當前地址提交
        type：'post',//請求的方式
        data:{'t1':$('#t1').val(),'t2':$('#t2').val()},//發送的數據
        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後端針對不一樣的編碼格式數據 會有不一樣的處理機制以及不一樣的獲取該數據的方法
    
    """
    先後端在作數據交互的時候 必定必定要代表你所發的的數據究竟是什麼格式
    
    前段後交互 你不能騙人家
    你的數據時什麼格式 你就應該準確無誤告訴別人是什麼格式   
    """

序列化組件

將用戶表的數據查詢出來返回給前端

給前端的是一個大字典，字典裏面的數據是一個小小的字段

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

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