python Django之Ajax

時間 2019-11-11

標籤 python django ajax 欄目 Python 简体版

原文原文鏈接

python Django之Ajax

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

異步的JavaScript：
使用【JavaScript語言】以及相關【瀏覽器提供類庫】的功能向服務端發送請求，當服務端處理完請求以後，【自動執行某個JavaScript的回調函數】。
PS：以上請求和響應的整個過程是【偷偷】進行的，頁面上無任何感知。
XML
XML是一種標記語言，是Ajax在和後臺交互時傳輸數據的格式之一

1、原生AJAX

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

一、XmlHttpRequest對象介紹java

咱們通常使用都是經過jquery來引用Ajax（jquery自己沒有Ajax功能，它只是Ajax的搬運工）python

原生Ajax使用案例以下：jquery

1 from django.conf.urls import url
2 from django.contrib import admin
3 from app01 import views
4 urlpatterns = [
5     url(r'^admin/', admin.site.urls),
6     url(r'^add1/', views.add1),
7     url(r'^add2/',  views.add2),
8     url(r'^fake_ajax/', views.fake_ajax),
9 ]

urls

 1 from django.shortcuts import render,redirect,HttpResponse
 2 
 3 # Create your views here.
 4 
 5 def add1(request):
 6     a1= int(request.POST.get('i1'))
 7     a2= int(request.POST.get('i2'))
 8     return HttpResponse(a1+a2)
 9 
10 
11 def add2(request):
12     if request.method=='GET':
13         i1=request.GET.get('i1')
14         i2=request.GET.get('i2')
15         print('add2.....')
16         return HttpResponse(i1+i2)

原生 Ajax views

 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" name="i1">
 9 +
10 <input type="text" name="i2">
11 =
12 <input type="text" name="i3">
13 <input type="button" id="btn1" value="jQuery Ajax" onclick="add1()">
14 {#綁定一個點擊事件#}
15 <input type="button" id="btn2" value="原生 Ajax" onclick="add2()">
16 {#綁定一個點擊事件#}
17 <script src="/static/jquery-3.2.1.js"></script>
18 <script>
19 {#=============================================經常使用方式========================================#}
20     function add1() {
21         $.ajax({
22             url:'/add1/',
23             type:'POST',
24             data:{'i1':$('#i1').val(),'i2':$('#i2').val()},
25 {#經過jquery獲取標籤的值#}
26             success:function (arg) {
27 {#回調函數，把arg參數傳進去#}
28                 $('#i3').val(arg);
29 {#經過jquery設置i3標籤的值爲arg變量的內容#}
30             }
31         })
32     }
33 
34 
35     function add2() {
36 {# ==========================================原生Ajax GET方式======================================#}
37         var xhr =new XMLHttpRequest();
38 {#使用原生的Ajax 建立一個對象#}
39         xhr.onreadystatechange=function () {
40 {#爲對象設置回調函數#}
41             if(xhr.readyState==4){
42 {#若是對象執行時的數值等於4就執行下邊的#}
43                 alert(xhr.responseText);
44 {#彈出提示框，框內的內容是對象返回的文本信息#}
45             }
46 
47         };
48         xhr.open('GET','/add2/?i1=12&i2=19');
49 {#經過對象建立一個鏈接 參數（GET傳輸方式，/add2/傳輸的地址url ?i1=12&i2=19這是放在url上的數據） 經過get方式傳輸，把傳輸的內容放在請求頭中，傳輸到/add2/url#}
50         xhr.send();
51 {#對象調用進行發送#}
52 
53 
54 {# ==========================================POST方式======================================#}
55         var xhr =new XMLHttpRequest()
56         xhr.onreadystatechange = function () {
57             if (xhr.readyState == 4){
58                 alert(xhr.responseText);
59             }
60 
61         }
62     };
63     xhr.open('POST','/add2/');
64 {#經過對象建立一個鏈接 參數（post傳輸方式，/add2/傳輸的地址url ） 經過get方式傳輸，把傳輸的內容放在請求體中，傳輸到/add2/url#}
65     xhr.setRequestHeader('Content-Type','application/x-www-from-urlencoded');
66 {#設置請求體，由於後端須要進行請求體的校驗#}
67     xhr.send('i1=12&i2=19');
68 {#設置要發送的數據#}
69 </script>
70 </body>
71 </html>

原生的 Ajax html　

XmlHttpRequest對象的主要方法：ajax

a. void open(String method,String url,Boolen async)
   用於建立請求
    
   參數：
       method： 請求方式（字符串類型），如：POST、GET、DELETE...
       url：    要請求的地址（字符串類型）
       async：  是否異步（布爾類型）
 
b. void send(String body)
    用於發送請求
 
    參數：
        body： 要發送的數據（字符串類型）
 
c. void setRequestHeader(String header,String value)
    用於設置請求頭
 
    參數：
        header： 請求頭的key（字符串類型）
        vlaue：  請求頭的value（字符串類型）
 
d. String getAllResponseHeaders()
    獲取全部響應頭
 
    返回值：
        響應頭數據（字符串類型）
 
e. String getResponseHeader(String header)
    獲取響應頭中指定header的值
 
    參數：
        header： 響應頭的key（字符串類型）
 
    返回值：
        響應頭中指定的header對應的值
 
f. void abort()
 
    終止請求

XmlHttpRequest對象的主要屬性：django

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

jQuery Ajax

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

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

jQuery Ajax 方法列表

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 
 9     <p>
10         <input type="button" onclick="XmlSendRequest();" value='Ajax請求' />
11     </p>
12 
13 
14     <script type="text/javascript" src="jquery-1.12.4.js"></script>
15     <script>
16 
17         function JqSendRequest(){
18             $.ajax({
19                 url: "http://c2.com:8000/test/",
20                 type: 'GET',
21                 dataType: 'text',
22                 success: function(data, statusText, xmlHttpRequest){
23                     console.log(data);
24                 }
25             })
26         }
27 
28 
29     </script>
30 </body>
31 </html>

基於jQueryAjax - Demo

2、僞Ajax 顧名思義Ajax就是僞造而成的

因爲HTML標籤的iframe標籤具備局部加載內容的特性，因此可使用其來僞造Ajax請求。後端

<!DOCTYPE html>
<html>
 
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
 
    <body>
 
        <div>
            <p>請輸入要加載的地址：<span id="currentTime"></span></p>
            <p>
                <input id="url" type="text" />
                <input type="button" value="刷新" onclick="LoadPage();">
            </p>
        </div>
 
 
        <div>
            <h3>加載頁面位置：</h3>
            <iframe id="iframePosition" style="width: 100%;height: 500px;"></iframe>
        </div>
 
 
        <script type="text/javascript">
 
            window.onload= function(){
                var myDate = new Date();
                document.getElementById('currentTime').innerText = myDate.getTime();
 
            };
 
            function LoadPage(){
                var targetUrl =  document.getElementById('url').value;
                document.getElementById("iframePosition").src = targetUrl;
            }
 
        </script>
 
    </body>
</html>

1 def fake_ajax(request):
2     print(request.POST)
3     return render(request,'fake_ajax.html',{'obj':'提交成功'})

僞Ajax views　　

 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 {#經過form標籤指定以post傳輸 傳輸的url是fake_ajax  提交方式使用form表單裏的ifr   這樣就達到不刷新頁面也能把全部信息打包發送#}
10     {% csrf_token %}
11 {#csrf驗證#}
12     <input type="text" name="user">
13     <a onclick="submitForm();">提交</a>
14 {#綁定點擊事件#}
15     <iframe id="ifr" name="ifr" src="http://www.baidu.com" width="1000px" height="2000px"></iframe>
16 {#使用iframe 標籤 訪問http://www.baidu.com連接 這樣就成功的僞造了一個Ajax#}
17 </form>
18 <script>
19     function submitForm() {
20 {#定義函數#}
21         document.getElementById('ifr').onclick=loadIframe;
22 {#查找id是ifr的標籤設置一個點擊事件,至關於綁定一個回調函數#}
23         document.getElementById('f1').submit();
24 {#找到id是f1的標籤.觸發提交函數#}
25     }
26 
27     function loadIframe() {
28 {#定義一個至關於回調函數的函數#}
29         alert(123);
30     }
31 </script>
32 </body>
33 </html>

僞 Ajax html

3、使用原生Ajax作一個文件上傳功能

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9     <h1>原生Ajax上傳文件</h1>
10     <input type="file" id="i1">
11     <a onclick="upload1();">上傳</a>
12     <div id="container1"></div>
13 
14 
15 
16 {#======================================================原生Ajax上傳文件======================================#}
17         function  upload1() {
18 {#定義一個點擊事件函數#}
19             var formData =new FormData();
20 {#經過FornData 實例化一個對象，FormData是個特殊的功能，能夠傳輸文件和字符串#}
21             formData.append('k1','v1');
22 {#給對象添加倆個值鍵是k1 值是v1#}
23             formData.append('fafafa',document.getElementById('i1').files[0]);
24 {#給對象添加鍵是fafafa 值是i1標籤的第一個#}
25             var xhr =new XMLHttpRequest();
26 {#實例化一個對象#}
27             xhr.onreadystatechange =function () {
28 {#給對象設置一個回調函數#}
29                 if (xhr.readyState==4){
30 {#判斷若是xhr對象的執行數字等於4#}
31                     var file_path =xhr.responseText;
32 {#獲取對象的文本信息賦值給file_path responseText是返回文本字符串#}
33                     var tag = document.createElement('img');
34 {#建立一個img標籤，標籤名字是tag#}
35                     tag.src='/'+file_path;
36 {#經過標籤名建立一個圖片路徑#}
37                     document.getElementById('container1').appendChild(tag);
38 {#經過id找到container1標籤 而後再經過標籤的名添加個子標籤#}
39                 }
40             }
41         };
42         xhr.open('POST','/upload/');
43 {#對象調用open方法建立一個鏈接，參數post傳輸方式  /upload/傳輸地址url#}
44         xhr.send(formData);
45 {#經過對象發送FormData實例化的對象#}
46 
47 
48     </script>
49 </body>
50 </html>

原生Ajax 文件上傳html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 
10     <h1>JQuery Ajax上傳文件</h1>
11     <input type="file" id="i2">
12     <a onclick="upload2();">上傳</a>
13     <div id="container2"></div>
14 
15 
16 {#======================================================JQuery Ajax上傳文件======================================#}
17         function upload2() {
18 {#定義一個函數#}
19             var formData =new FormData();
20 {#經過FornData 實例化一個對象，FormData是個特殊的功能，能夠傳輸文件和字符串#}
21             formData.append('k1','v1');
22 {#給對象添加倆個值鍵是k1 值是v1#}
23             formData.append('fafafa',$('#i2')[0].files[0]);
24 {#把fafafa做爲鍵 值是id等於i2的標籤轉換成Dom對象的第一個#}
25             $.ajax({
26                 url:'/upload/',
27                 type:'POST',
28                 data:formData,
29                 contentType:false,
30 {#告訴後端不進行請求頭設置#}
31                 processData:false,
32 {#告訴後端不進行請求頭設置#}
33                 success:function (arg) {
34 {#回調函數#}
35                     var tag =document.createElement('img');
36 {#建立一個img標籤名稱爲tag#}
37                     tag.src='/'+arg;
38 {#爲名字爲tag的標籤設置路徑#}
39                     $('#container2').append(tag);
40 {#爲id是container2標籤的添加名字是tag的標籤爲子標籤#}
41                 }
42             })
43 
44         }
45 
46 
47 
48 
49     </script>
50 </body>
51 </html>

JQuery Ajax 文件上傳 html

<!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 id="f1" method="POST" action="/upload/" target="ifr" enctype="multipart/form-data">
    <iframe id="ifr" name="ifr" src="" style="display: none"></iframe>
    <input type="file" name="fafafa">
    <a onclick="upload3();">上傳</a>
    </form>
    <div  id="container3"></div>
    <script src="/static/jquery-3.2.1.js"></script>
    <script>

{#======================================================原生Ajax上傳文件======================================#}
        function  upload1() {
{#定義一個點擊事件函數#}
            var formData =new FormData();
{#經過FornData 實例化一個對象，FormData是個特殊的功能，能夠傳輸文件和字符串#}
            formData.append('k1','v1');
{#給對象添加倆個值鍵是k1 值是v1#}
            formData.append('fafafa',document.getElementById('i1').files[0]);
{#給對象添加鍵是fafafa 值是i1標籤的第一個#}
            var xhr =new XMLHttpRequest();
{#實例化一個對象#}
            xhr.onreadystatechange =function () {
{#給對象設置一個回調函數#}
                if (xhr.readyState==4){
{#判斷若是xhr對象的執行數字等於4#}
                    var file_path =xhr.responseText;
{#獲取對象的文本信息賦值給file_path responseText是返回文本字符串#}
                    var tag = document.createElement('img');
{#建立一個img標籤，標籤名字是tag#}
                    tag.src='/'+file_path;
{#經過標籤名建立一個圖片路徑#}
                    document.getElementById('container1').appendChild(tag);
{#經過id找到container1標籤 而後再經過標籤的名添加個子標籤#}
                }
            }
        };
        xhr.open('POST','/upload/');
{#對象調用open方法建立一個鏈接，參數post傳輸方式  /upload/傳輸地址url#}
        xhr.send(formData);
{#經過對象發送FormData實例化的對象#}


{#======================================================JQuery Ajax上傳文件======================================#}
        function upload2() {
{#定義一個函數#}
            var formData =new FormData();
{#經過FornData 實例化一個對象，FormData是個特殊的功能，能夠傳輸文件和字符串#}
            formData.append('k1','v1');
{#給對象添加倆個值鍵是k1 值是v1#}
            formData.append('fafafa',$('#i2')[0].files[0]);
{#把fafafa做爲鍵 值是id等於i2的標籤轉換成Dom對象的第一個#}
            $.ajax({
                url:'/upload/',
                type:'POST',
                data:formData,
                contentType:false,
{#告訴後端不進行請求頭設置#}
                processData:false,
{#告訴後端不進行請求頭設置#}
                success:function (arg) {
{#回調函數#}
                    var tag =document.createElement('img');
{#建立一個img標籤名稱爲tag#}
                    tag.src='/'+arg;
{#爲名字爲tag的標籤設置路徑#}
                    $('#container2').append(tag);
{#爲id是container2標籤的添加名字是tag的標籤爲子標籤#}
                }
            })

        }

        function upload3() {
{#            定義一個函數#}
            document.getElementById('ifr').onload=loadIframe;
{#            查找id是ifr的標籤並設置在加載時調用loadIframe函數#}
            document.getElementById('f1').submit();
{#查找id是f1的標籤並啓動#}
        }

        function loadIframe() {
{#定義一個函數#}
            var content =document.getElementById('ifr').contentWindow.document.body.innerText;
{#查找id是ifr的標籤，的window內容的請求體的文本信息#}
            var tag = document.createElement('img');
{#建立一個img標籤並設置標籤名字是tag#}
            tag.src='/'+content;
{#找到名字是tag標籤設置路徑#}
            $('#container3').append(tag);
{#找到id 是container3的標籤添加一個名字是tag的標籤tag#}

        }
    </script>
</body>
</html>

相關標籤/搜索

django+jquery+ajax+post

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。