Django-Ajax組件

時間 2019-11-17

標籤 django ajax 組件欄目 Python 简体版

原文原文鏈接

Ajax

Ajax簡介

AJAX(Asynchronous Javascript And XML)，翻譯成中文爲"異步Javascript和XML"。即便用Javascript語言與服務器進行異步交互，傳輸的數據爲XML(固然，傳輸的數據不僅是XML，如今更多使用json數據)html

同步交互：客戶端發出一個請求後，須要等待服務器響應結束後，才能發出第二個請求
異步交互：客戶端發出一個請求後，無需等待服務器響應結束，就能夠發出第二個請求

同步交互與異步交互

Ajax特色：jquery

異步
瀏覽器頁面局部刷新(這一特色給用戶的感覺是在不知不覺中完成請求和響應過程)

場景：ajax

基於jquery的Ajax實現

$(".class").click(function(){      綁定事件
    $.ajax({
        url:"",
        type:"GET/post",
        data: {
        a:1,
        b:2,
        }
        success: function(res){
        響應處理
        }
    })
})

基於post請求的json請求內容格式

Python中引入JsonResponse：chrome

from django.http import JsonResponse

Javascript中自定義對象({ })與json字符串的轉換：django

# <1> 自定義對象轉換成json字符串： JSON.stringify()
# <2> json字符串轉換成自定義對象： 變量名.parse()

contentType爲json的基於Ajax請求：json

<input type="button" class="ajax-btn" value="submit_json">
<script>
    $('.ajax_btn').click(function(){
        $.ajax({
            url:'/put1/',
            type:'post',
            contentType:'json',
            data:JSON.stringify({
                a:1,
                b:2
            }),
            success:function(res){
                響應處理
            }
        })
    })
</script>

文件上傳

請求頭ContentType

ContentType指的是請求體的編碼的類型，常見的類型共有3種：瀏覽器

1. application/x-www-form-urlencoded

這是最多見的POST提交數據的方式。瀏覽器的原生<form>表單，如裏不設置enctype屬性，那麼最終就會以application/x-www-form-urlencoded方式提交數據。請求相似於下面這樣(無關的請求頭在本文中都省略掉了)：服務器

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

user=Ethan&age=22

2. multipart/form-data

這是一常見的POST數據提交方式。在使用表單上傳文件時，必須讓<form>表單的enctype等於multipart/form-data。app

這種方式通常用來上傳文件，各大服務端語言對它也有着良好的支持異步

看以下請求示例：

POST http://www.example.com HTTP/1.1
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA

------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="user"

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

PNG ... content of chrome.png ...
------WebKitFormBoundaryrGKCBY7qhFd3TrwA--

這個例子稍微複雜點：

首先生成了一個boundary用於分割不一樣的字段，爲了不與正文內容重複，boundary很長很複雜。
而後Content-Type裏指明瞭數據是以multipart/form-data來編碼，本次請求的boundary是什麼內容。
消息主體裏按照字段個數又分爲多個結構相似的部分，每部分都是以—boundary開始，緊接着是內容描述信息，而後是回車，最後是字段具體內容(文本或二進制)
若是傳輸的是文件，還要包含文件名和文件類型信息。消息主體最後以—boundary—標示結束。

關於multipart/form-data詳細定義，可參考rfc 1867

以上提到的兩種POST數據的方式，都是瀏覽器原生支持的，並且現階段標準中原生<form>表單也只支持這兩種方式(經過<form>元素的enctype屬性指定，默認爲application/x-www-form-urlencoded。其實還支持text/plain，不過用得很是少)

3. application/json

如今愈來愈多的人把application/json做爲請求頭，用來告訴服務端消息主體是序列化後的JSON字符串。因爲JSON規範的流行，除了低版本IE以外的各大瀏覽器都原生支持JSON.stringify，服務端語言也都有處理JSON的函數，使用JSON不會趕上什麼麻煩。JSON格式支持比鍵值對複雜的多的結構化數據。

基於form表單的文件上傳

模板部分

<form action="/put/", method="post", enctype="multipart/form-data">
    {% csrf_token %}
    <input type="text" name="user">
    <input type="file" name="file">
    <input type="submit">
</form>

視圖部分

def put(request):
    file_obj = request.FILES.get("file")
    name = file_obj.name
    with open("", "wb") as f_w:
        for line in file_obj:
            f_w.write(line)
    return HttpResponse("上傳成功")

基於Ajax的文件上傳

<div>
    {% csrf_taken %}
    <input type="text" class="user">
    <input type="file" class="file">
    <input type="button" value="submit" class="ajax_btn">
</div>
<script>
    $(".ajax_btn").click(function(){
        let formdata = new FormData();
        formdata.append("csrfmiddlewaretoken", $("[name='csrfmiddlewaretoken']").val())
        formdata.append("user", $(".user").val());
        formdata.append("file", $(".file")[0].files[0]);
        $.ajax({
            url: "/put/",
            type: "post",
            contentType: false,    // 不設置內容類型
            processData: false,    // 不處理數據
            data: formdata,
            success: function(res){
                響應內容
            }
        })
    })
</script>