Django框架基礎之ajax

時間 2020-08-18

標籤 django 框架基礎 ajax 欄目 Python 简体版

原文原文鏈接

對於WEB應用程序：用戶瀏覽器發送請求，服務器接收並處理請求，而後返回結果，每每返回就是字符串（HTML），瀏覽器將字符串（HTML）渲染並顯示瀏覽器上。html

一、傳統的Web應用jquery

一個簡單操做須要從新加載全局數據ajax

二、AJAX數據庫

AJAX，Asynchronous JavaScript and XML (異步的JavaScript和XML)，一種建立交互式網頁應用的網頁開發技術方案。json

異步的JavaScript：
使用【JavaScript語言】以及相關【瀏覽器提供類庫】的功能向服務端發送請求，當服務端處理完請求以後，【自動執行某個JavaScript的回調函數】。
PS：以上請求和響應的整個過程是【偷偷】進行的，頁面上無任何感知。

XML
XML是一種標記語言，是Ajax在和後臺交互時傳輸數據的格式之一

利用AJAX能夠作：
一、註冊時，輸入用戶名自動檢測用戶是否已經存在。
二、登錄時，提示用戶名密碼錯誤
三、刪除數據行時，將行ID發送到後臺，後臺在數據庫中刪除，數據庫刪除成功後，在頁面DOM中將數據行也刪除。（博客園）瀏覽器

原生ajax

Ajax主要就是使用【XmlHttpRequest】對象來完成請求的操做，該對象在主流瀏覽器中均存在(除早起的IE)，Ajax首次出現IE5.5中存在（ActiveX控件）。服務器

提交數據：app

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <input type="text" id="i1">
 9 +
10 <input type="text" id="i2">
11 =
12 <input type="text" id="i3">
13 <input type="button" value='jquery ajax' onclick="add1()">
14 <input type="button" value='原生 ajax' onclick="add2()">
15 </body>
16 <script src="/static/jquery-3.2.1.js"></script>
17 <script>
18     //jquery  ajax 提交請求
19     function add1(){
20          $.ajax({
21              url:'/add1/',
22              type:'POST',
23              data:{'a1':$('#i1').val(),'a2':$('#i2').val()},
24              success:function(data){
25                  $('#i3').val(data);
26              }
27          })
28     }
29     //原生ajax 以get的方式提交請求
30     function add2(){
31         var xhr= new XMLHttpRequest();
32         xhr.onreadystatechange=function(){
33             if(xhr.readyState==4){
34                 alert(xhr.responseText)
35             }
36         };
37         xhr.open('GET','/add2/?i1=12&i2=19');
38         xhr.send();
39     }
40     //原生ajax 以post的方式提交請求
41     function add2() {
42         var xhr= new XMLHttpRequest();
43         xhr.onreadystatechange=function(){
44             if(xhr.readyState==4){
45                 alert(xhr.responseText)
46             }
47         };
48         xhr.open('POST','/add2/');
49         xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
50         xhr.send('i1=12&i2=19');
51     }
52 </script>
53 </html>

View Code

XmlHttpRequest對象的主要方法：框架

 1 a. void open(String method,String url,Boolen async)
 2    用於建立請求
 3     
 4    參數：
 5        method： 請求方式（字符串類型），如：POST、GET、DELETE...
 6        url：    要請求的地址（字符串類型）
 7        async：  是否異步（布爾類型）
 8  
 9 b. void send(String body)
10     用於發送請求
11  
12     參數：
13         body： 要發送的數據（字符串類型）
14  
15 c. void setRequestHeader(String header,String value)
16     用於設置請求頭
17  
18     參數：
19         header： 請求頭的key（字符串類型）
20         vlaue：  請求頭的value（字符串類型）
21  
22 d. String getAllResponseHeaders()
23     獲取全部響應頭
24  
25     返回值：
26         響應頭數據（字符串類型）
27  
28 e. String getResponseHeader(String header)
29     獲取響應頭中指定header的值
30  
31     參數：
32         header： 響應頭的key（字符串類型）
33  
34     返回值：
35         響應頭中指定的header對應的值
36  
37 f. void abort()
38  
39     終止請求

View Code

XmlHttpRequest對象的主要屬性：異步

 1 a. Number readyState
 2    狀態值（整數）
 3  
 4    詳細：
 5       0-未初始化，還沒有調用open()方法；
 6       1-啓動，調用了open()方法，未調用send()方法；
 7       2-發送，已經調用了send()方法，未接收到響應；
 8       3-接收，已經接收到部分響應數據；
 9       4-完成，已經接收到所有響應數據；
10  
11 b. Function onreadystatechange
12    當readyState的值改變時自動觸發執行其對應的函數（回調函數）
13  
14 c. String responseText
15    服務器返回的數據（字符串類型）
16  
17 d. XmlDocument responseXML
18    服務器返回的數據（Xml對象）
19  
20 e. Number states
21    狀態碼（整數），如：200、404...
22  
23 f. String statesText
24    狀態文本（字符串），如：OK、NotFound...

View Code

jquery ajax

jQuery其實就是一個JavaScript的類庫，其將複雜的功能作了上層封裝，使得開發者能夠在其基礎上寫更少的代碼實現更多的功能。

jQuery 不是生產者，而是大天然搬運工。
jQuery Ajax本質 XMLHttpRequest 或 ActiveXObject

 1 jQuery.get(...)
 2                 全部參數：
 3                      url: 待載入頁面的URL地址
 4                     data: 待發送 Key/value 參數。
 5                  success: 載入成功時回調函數。
 6                 dataType: 返回內容格式，xml, json,  script, text, html
 7 
 8 
 9             jQuery.post(...)
10                 全部參數：
11                      url: 待載入頁面的URL地址
12                     data: 待發送 Key/value 參數
13                  success: 載入成功時回調函數
14                 dataType: 返回內容格式，xml, json,  script, text, html
15 
16 
17             jQuery.getJSON(...)
18                 全部參數：
19                      url: 待載入頁面的URL地址
20                     data: 待發送 Key/value 參數。
21                  success: 載入成功時回調函數。
22 
23 
24             jQuery.getScript(...)
25                 全部參數：
26                      url: 待載入頁面的URL地址
27                     data: 待發送 Key/value 參數。
28                  success: 載入成功時回調函數。
29 
30 
31             jQuery.ajax(...)
32 
33                 部分參數：
34 
35                         url：請求地址
36                        type：請求方式，GET、POST（1.9.0以後用method）
37                     headers：請求頭
38                        data：要發送的數據
39                 contentType：即將發送信息至服務器的內容編碼類型(默認: "application/x-www-form-urlencoded; charset=UTF-8")
40                       async：是否異步
41                     timeout：設置請求超時時間（毫秒）
42 
43                  beforeSend：發送請求前執行的函數(全局)
44                    complete：完成以後執行的回調函數(全局)
45                     success：成功以後執行的回調函數(全局)
46                       error：失敗以後執行的回調函數(全局)
47                 
48 
49                     accepts：經過請求頭髮送給服務器，告訴服務器當前客戶端課接受的數據類型
50                    dataType：將服務器端返回的數據轉換成指定類型
51                                    "xml": 將服務器端返回的內容轉換成xml格式
52                                   "text": 將服務器端返回的內容轉換成普通文本格式
53                                   "html": 將服務器端返回的內容轉換成普通文本格式，在插入DOM中時，若是包含JavaScript標籤，則會嘗試去執行。
54                                 "script": 嘗試將返回值看成JavaScript去執行，而後再將服務器端返回的內容轉換成普通文本格式
55                                   "json": 將服務器端返回的內容轉換成相應的JavaScript對象
56                                  "jsonp": JSONP 格式
57                                           使用 JSONP 形式調用函數時，如 "myurl?callback=?" jQuery 將自動替換 ? 爲正確的函數名，以執行回調函數
58 
59                                   若是不指定，jQuery 將自動根據HTTP包MIME信息返回相應類型(an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string
60 
61                  converters： 轉換器，將服務器端的內容根據指定的dataType轉換類型，並傳值給success回調函數
62                          $.ajax({
63                               accepts: {
64                                 mycustomtype: 'application/x-some-custom-type'
65                               },
66                               
67                               // Expect a `mycustomtype` back from server
68                               dataType: 'mycustomtype'
69 
70                               // Instructions for how to deserialize a `mycustomtype`
71                               converters: {
72                                 'text mycustomtype': function(result) {
73                                   // Do Stuff
74                                   return newresult;
75                                 }
76                               },
77                             });

View Code

僞ajax

iframe標籤:會建立包含另一個文檔的內聯框架,能夠在不刷新網頁的狀況下提交請求

僞ajax 提交數據: 能夠在不刷新網頁的狀況下替form表單提交請求
<form id='f1' method='POST' action="/fake_ajax/" target="ifr" >
{% csrf_token %}
<iframe id="ifr" name="ifr" ></iframe>
<input type="text" name="user">
<a onclick="submitForm()">提交</a>
</form>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <form id='f1' method='POST' action="/fake_ajax/" target="ifr" >
 9     {% csrf_token %}
10     <iframe id="ifr" name="ifr" ></iframe>
11     <input type="text" name="user">
12     <a onclick="submitForm()">提交</a>
13 </form>
14 <script>
15     function submitForm(){
16         document.getElementById('f1').submit();
17         document.getElementById('ifr').onload=loadframe;
18     }
19     function loadframe(){
20         var content=document.getElementById('ifr').contentWindow.document.body.innerText;
21         alert(content);
22     }
23 </script>
24 </body>
25 </html>

View Code

上傳文件

form表單上傳文件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <form action="/f1/" method="post" enctype="multipart/form-data">
 9     {% csrf_token %}
10     <input type="file" name="fafafa">
11     <input type="submit" value="提交">
12 </form>
13 </body>
14 </html>

View Code

 1 def f1(request):
 2     if request.method=='GET':
 3         return render(request,'f1.html')
 4     else:
 5         import os
 6         file_obj=request.FILES.get('fafafa')
 7         f=open(os.path.join('static',file_obj.name),'wb')
 8         for chunk in file_obj.chunks():
 9             f.write(chunk)
10         return render(request,'f1.html')

View Code

基於form組價驗證的文件上傳

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <form method='POST' action="/f2/" enctype="multipart/form-data">
 9     {% csrf_token %}
10    {{ obj.fafafa }}{{ obj.errors.fafafa.0 }}
11     <input type="submit" value="提交">
12 </form>
13 </body>
14 </html>

View Code

 1 class f2Form(Form):
 2     fafafa=fields.FileField()
 3 
 4 def f2(request):
 5     if request.method=='GET':
 6         obj=f2Form()
 7         return render(request,'f2.html',{'obj':obj})
 8     else:
 9         obj=f2Form(files=request.FILES)
10         if obj.is_valid():
11             print('afdvfdvgrg')
12             print(obj.cleaned_data.get('fafafa').name)
13             print(obj.cleaned_data.get('fafafa').size)
14         return render(request,'f2.html',{'obj':obj})

View Code

原生ajax   jquery ajax   僞ajax上傳文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>原生ajax上傳文件</h1>
    <input type="file" id="i1">
    <a onclick="upload1()">上傳</a>
    <div id="container1"></div>

    <h1>jquery ajax上傳文件</h1>
    <input type="file" id="i2">
    <a onclick="upload2()">上傳</a>
    <div id="container2"></div>

     <h1>僞ajax上傳文件</h1>
    <form action="/upload/" method="post" id="f1" target="ifr" enctype="multipart/form-data">
        <iframe id="ifr" name="ifr"></iframe>
        <input type="file" name="fafafa">
        <a onclick="upload3()">上傳</a>
        <div id="container3"></div>
    </form>
</body>
<script src="/static/jquery-3.2.1.js"></script>
<script>
    function upload1() {
        var formData=new FormData();
        formData.append('k1','v1');
        formData.append('fafafa',document.getElementById('i1').files[0]);

        var xhr=new XMLHttpRequest();
        // 預覽功能
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                var file_path=xhr.responseText;
                var tag=document.createElement('img');
                tag.src='/'+file_path;
                document.getElementById('container1').appendChild(tag);
            }
        }
        xhr.open('POST','/upload/');
        xhr.send(formData)
    }

    function upload2() {
        var formData=new FormData();
        formData.append('k1','v1');
        formData.append('fafafa',$('#i2')[0].files[0]);

        $.ajax({
            url:'/upload/',
            type:'post',
            data:formData,
            contentType:false,
            processData:false,
            success:function(arg){
                var tag=document.createElement('img');
                tag.src='/'+arg;
                $('#container2').append(tag);
            }
        })
    }

    function upload3(){
        document.getElementById('f1').submit();
        document.getElementById('ifr').onload=loadiframe;
    }
    function loadiframe(){
        var content=document.getElementById('ifr').contentWindow.document.body.innerText;
        var tag=document.createElement('img');
        tag.src='/'+content;
        $('#container3').append(tag);
    }
</script>
</html>

def upload(request):
    if request.method=='GET':

        return render(request,'upload.html')
    else:
        print(request.POST,request.FILES)
        file_obj=request.FILES.get('fafafa')
        print(file_obj.name)
        file_path=os.path.join('static',file_obj.name)
        with open(file_path,'wb') as f:
            for chunk in file_obj.chunks():
                f.write(chunk)

        return HttpResponse(file_path)