010---Django與Ajax

預備知識：
    什麼是Json?

    定義：json是一種輕量級的數據交換格式。
        若是咱們要在不一樣的編程語言中傳遞對象，就必須把對象序列化爲標準格式，好比XML,但那是以往的時代，如今大多數使用序列化爲json，由於json自己就是一個字符串，層次清晰，易閱讀能夠被全部語言讀取，也方便的存儲到磁盤和網絡傳輸。
    格式：一個無序的key:value集合。{"k1":"v1","k2":"v2"}

    在程序運行過程當中。全部的變量都是存在內存中。一旦程序結束，變量也會被銷燬。
    因此：
        序列化：咱們把變量從內存中變成可存儲或者可傳輸的過程稱爲序列化
        反序列化：把變量內容從序列化的對象從新讀取到內存裏稱爲反序列化

    在js裏面有兩個經常使用方法實現json字符串和json對象互轉

    json對象---json字符串
        JSON.stringify():
        console.log(JSON.stringify({'name':'xjm'));

    json字符串---js對象
        JSON.parse()
        console.log(JSON.parse('{"name":"xjm})');
    注意：
        json對象屬性名必須是雙引號
        不能使用undefined;
        不能是函數和日期對象

Ajax
    ajax：翻譯成中文就是異步JavaScript和XML。就是使用JavaScript語言與服務器進行異步交互，傳輸的數據爲xml，固然如今不僅是xml，更多的是使用Json數據

    特色：
        異步交互：客戶端發出一個請求後，無需等服務器響應結束，就能夠發出第二個請求
        局部刷新：給用戶的感覺是在不知不覺中完成請求和響應過程，無需刷新整個頁面

場景：
    註冊的錯誤提示：該用戶已註冊、該用戶名已被使用等
    百度等搜索引擎的輸入框提示：輸入一個python關鍵詞後會出現一個下拉列表，這裏用到了ajax技術，當輸入框輸入變化時，瀏覽器會偷偷向服務器發送一個請求，而後接收響應顯示。

基於Jquery的Ajax實現

 1 <button class="send_Ajax">send_Ajax</button>
 2 <script>
 3 
 4        $(".send_Ajax").click(function(){
 5 
 6            $.ajax({
 7                url:"/handle_Ajax/",
 8                type:"POST",
 9                data:{username:"Yuan",password:123},
10                success:function(data){
11                    console.log(data)
12                },
13                error: function (jqXHR, textStatus, err) {
14                         console.log(arguments);
15                     },
16 
17                complete: function (jqXHR, textStatus) {
18                         console.log(textStatus);
19                 },
20 
21                statusCode: {
22                     '403': function (jqXHR, textStatus, err) {
23                           console.log(arguments);
24                      },
25 
26                     '400': function (jqXHR, textStatus, err) {
27                         console.log(arguments);
28                     }
29                 }
30            })
31        })
32 </script>

 

$.ajax()參數

    請求參數：
        url:請求路徑
        type:請求類型，默認get
        data:{a:1,b:2}  ajax默認get請求  默認urlencoded編碼類型提交數據  /?a=1&b=2
        processData:聲明當前的data數據是否進行轉碼或預處理  默認True
        contentType:發送數據時的編碼類型
　　

　　請求頭ContentType
    　　是指請求體的編碼類型，常見的有三種：

　　　　一、application/x-www-form-urlencoded

    　　最多見的post提交數據的方式，form表單若是不設置enctype屬性，那麼默認就是這種方式提交

 　　 POST http://www.123@qq.com HTTP:/1.1
 　　 Content-Type:application/x-www-form-urlencoded;charset=utf-8

 username=jzy&age=22
　　　2　、multipart/form-data
 　　 這也是一個常見的post提交數據的方式。咱們使用表單上傳文件時，必須在form中添加enctype=multipart/form-data/

 　　Content-Disposition: form-data; name="file"; filename="chrome.png"
 　　 Content-Type: image/png

　　三、application/json
 　　這個做爲響應頭你們應該不陌生，可是如今愈來愈多的人把它做爲請求頭。用來告訴服務端消息主體是序列化後的json字符串。

    響應參數：
        dataType:預期服務端返回的數據類型，服務端返回的數據會根據這個值解析後，傳遞給回調函數。

csrf跨站請求僞造

1     data:{
2         "csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val();
3     }
4 
5     $.ajax({
6         headers:{"X-CSRFToken":$.cookie('csrftoken')}
7     })

基於form表單的文件上傳

    模板部分：
        <form action="" method="post" enctype="multipart/form-data">
              用戶名 <input type="text" name="user">
              頭像 <input type="file" name="avatar">
            <input type="submit">
        </form>
    視圖部分：
        def index(request):
            print(request.body)   # 原始的請求體數據
            print(request.GET)    # GET請求數據
            print(request.POST)   # POST請求數據
            print(request.FILES)  # 上傳的文件數據


            return render(request,"index.html")

 

基於Ajax的文件上傳

 1 模版部分
 2         <h3>基於Ajax文件上傳</h3>
 3         <form>
 4             用戶名：<input type="text" id="user">
 5             密碼：<input type="password" id="pwd">
 6             <p>頭像：<input type="file" id="head_imgurl"></p>
 7             <!--input 的type類型必定不能是submit-->
 8             <input type="button" value="Json" class="json按鈕">
 9             <input type="button" value="Ajax" class="ajax按鈕">
10         </form>
11 
12         <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
13         <script>
14 
15             //發送json數據
16             $('.json').click(function () {
17                 $.ajax({
18                     url: '',
19                     type: 'post',
20                     contentType: 'application/json',
21                     data: JSON.stringify({
22                         a: 1,
23                         b: 2
24                     }),
25                     success: function (data) {
26                         console.log(data)
27                     }
28                 })
29             });
30 
31             //ajax文件上傳
32             $('.ajax').click(function () {
33                 var formdata=new FormData();
34                 formdata.append("user",$('#user').val());
35                 formdata.append("pwd",$('#pwd').val());
36                 formdata.append("head_imgurl",$('#head_imgurl')[0].files[0])
37                 $.ajax({
38                     url:'',
39                     type:'post',
40                     contentType:false,  // 不設置內容類型
41                     processData:false,  // 不處理數據
42                     data:formdata,
43                     success:function (data) {
44                         console.log(data);
45                     }
46                 })
47             })
48         </script>
49     視圖部分
50         def file_put(request):
51             if request.method == 'POST':
52                 print(request.body)  # 請求報文
53                 print(request.POST)  # 只有請求頭是urlencoded時，纔有數據
54 
55                 # data = request.body.decode('utf-8')
56                 # import json
57                 # print(json.loads(data).get('a'))
58                 # print(json.loads(data).get('b'))
59 
60 
61                 # user = request.POST.get('user')
62 
63                 # 獲取文件對象
64                 file_obj = request.FILES.get('head_imgurl')
65 
66                 # 文件名稱：file_obj.name
67                 with open(file_obj.name,'wb') as f:
68                     for line in file_obj:
69                         f.write(line)
70                 return HttpResponse('ok')
71 
72             return render(request,'file_put.html')