django與Ajax

時間 2019-12-02

標籤 django ajax 欄目 Python 简体版

原文原文鏈接

目錄css

Ajax簡介

Ajax（Asynchronous Javascript And XML）翻譯成中文就是「異步的Javascript和XML」。即便用Javascript語言與服務器進行異步交互，傳輸的數據爲XML（固然，傳輸的數據不僅是XML）。html

ajax是異步提交的前端

Ajax 不是新的編程語言，而是一種使用現有標準的新方法。python

Ajax 最大的優勢是在不從新加載整個頁面的狀況下，能夠與服務器交換數據並更新部分網頁內容。（這一特色給用戶的感覺是在不知不覺中完成請求和響應過程）jquery

舉個實例ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<input type="text" id="t1"> + <input type="text" id="t2"> = <input type="text" id="t3">
<p>
    <button id="b1">計算</button>
</p>
<script>
    $('#b1').on('click', function () {
        $.ajax({

            url:'',    // 數據提交的地址， 不寫就是向當前頁面提交，也能夠寫後綴，也能夠寫全稱，與form表單參數action同樣
            type: 'post',   // 提交方式，不寫默認是get請求
            data: {'t1': $('#t1').val(), 't2':$('#t2').val()}, // 提交的數據
            success: function (data) {     // 形參data就是異步提交以後後端返回的結果
                $('#t3').val(data)
            }


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

數據傳輸編碼格式的解析

先後端交互式一個數據編碼格式，針對不一樣的數據，後端會進行不一樣的處理django

三種格式：編程

urlencoded
formdata
application/json

form表單發送三種數據格式的狀況

form表單post請求默認的編碼格式是urlencoded

在瀏覽器-->檢查-->network能夠看到，咱們form表單在提交數據的時候，有以下信息：json

Request Headers：    # 請求頭
Content-Type:application/x-www-form-urlencoded; charset=UTF-8   # 數據編碼格式-urlencoded

Form Data：# 攜帶的數據
d1=23&d2=23

在咱們後端django中針對urlencoded數據，會自動解析並封裝到request.POST方法中bootstrap

form表單發送文件

Request Headers：    # 請求頭
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryhjKCHQHDmcE62iMQ  # 數據編碼格式，-form-data

Form Data：#針對form-data格式的數據，在瀏覽器是沒法查看的

發送到後端django，文件對象會自動解析到 request.POST 和 request.FILES 中，前者記錄文件名，後者記錄對象。

form表單沒法發送json格式的數據，要想實現，只能藉助ajax

ajax發送數據的編碼格式

默認的編碼格式也是urlencoded

ajax傳輸json格式數據

有個參數，contentType，不寫默認是urlencoded，

在view.py中

import json

def home(request):
    if request.method == "POST":
        print(request.body)
        json_bytes = request.body
        print(json.loads(json_bytes), type(json.loads(json_bytes)))
        # 反序列化爲python字典格式
    return render(request, 'form_test.html')


# 結果：
'''

b'{"d1":"cwz","d2":"123"}'
{'d1': 'cwz', 'd2': '123'} <class 'dict'>
'''

form_test.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<form action="" method="post">

    username: <input type="text" name="username" id="d1">
    password: <input type="text" name="password" id="d2">
</form>
<button id="d3">點我發送json格式</button>

<script>
    $('#d3').click(function () {
        $.ajax({
            url:'',
            type:'post',
            contentType:'application/json', //須要指定編碼格式爲json
            data:JSON.stringify({'d1':$('#d1').val(),'d2':$('#d2').val()}), // 須要前端發送JSON字符串，JSON。stringify序列化便可。
            success:function (data) {
                alert(123)
            }
        })
    })
</script>
</body>
</html>

ajax傳json格式數據特色：

django後端針對json格式的數據不會自動幫你解析會直接原封不動的給你放到request.body中你能夠手動處理獲取數據。拿到request.body是一個bytes類型數據

Ajax傳輸文件數據

須要藉助內置對象，該對象既能夠攜帶文件數據，一樣也支持普通的鍵值對

注意幾個參數：

data：formdata對象
contentType：false
processData：false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
username:<input type="text" name="username">
password:<input type="text" name="password">
myfile:<input type="file" name="myfile" id="d1">
<button id="d2">點我發送文件</button>

<script>


    $('#d2').click(function () {
        // 先生成一個內置對象
        var MyFormData = new FormData();
        // 先添加普通的鍵值
        MyFormData.append('username', 'cwz');
        MyFormData.append('password', '123');
        //添加文件數據
        MyFormData.append('myfile', $('#d1')[0].files[0]);  // 將jquery對象轉換成原生的js對象,利用原生js對象的方法 直接獲取文件內容

        $.ajax({

            url: '',
            type: 'post',
            data: MyFormData,

            contentType: false,   //不用任何編碼,由於formData對象自帶編碼 django可以識別該對象
            processData: false,   //告訴瀏覽器不要處理個人數據 直接發就行

            success: function (data) {
                
            }

        })
    })

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

django內置序列化模塊

序列化的目的就是將數據整合成一個大字典

導入這個模塊：from django.core import serializers

比本身用json轉方便多了

from app01 import models
from django.core import serializers

def yyy(request):
    author_queryset = models.Author.objects.all()
    res = serializers.serialize('json', author_queryset)
    return HttpResponse(res)

效果：

[{
    "model": "app01.author",
    "pk": 1,
    "fields": {
        "name": "\u90b6\u98ce",
        "email": "123@qq.com",
        "author_detail": 1
    }
}, {
    "model": "app01.author",
    "pk": 2,
    "fields": {
        "name": "\u5f0f\u5fae",
        "email": "111@sin.com",
        "author_detail": 2
    }
}, {
    "model": "app01.author",
    "pk": 3,
    "fields": {
        "name": "\u65e0\u540d",
        "email": "100@qq.com",
        "author_detail": 3
    }
}]