ajax與python後端互動

阿新 • • 發佈：2022-05-19

ajax簡介
前後端傳輸資料編碼格式
ajax傳送json格式資料
ajax攜帶檔案資料
回撥機制處理策略

ajax簡介

ajax可以在頁面不重新整理的情況下可以與後端進行資料互動，非同步提交，區域性重新整理。

比如百度的註冊頁面，我並沒有點選提交它就提醒我使用者已存在了。

ajax不是一門全新知識，本質就是一些js程式碼，我們學習ajax直接使用jQuery封裝之後的版本(語法更加簡單)，使用ajax的前提必須要引入jQuery檔案。

使用

前端中，ajax裡的請求攜帶的資料一般用字典型別，便於後端接收並使用。

$.ajax({
    url:'',  // 頁面請求地址，不寫就是當前地址
    type:'post',  // 請求方式，不寫預設為get請求
    data:{'data':'data'},  // 請求攜帶的資料
    success:function (args) {  // 非同步回撥函式，後端有回覆時觸發，args接收後端傳來的資料
    	
	}
})

後端使用request.is_ajax()判斷是否是ajax請求，並要使用Httpresponse返回給ajax非同步回撥函式中的形參。

def index(request):
    if request.is_ajax():  # 判斷是否是ajax請求
        return Httpresponse('返回給ajax的資料')
    return render(request, 'index.html')

案例

讓輸入框後面來一段內容可以跟著輸入框實時變化。

前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
    <p>使用者名稱<input id="username" type="text"><span id="name" style="color:red;"></span></p>
    <script>
        $('#username').on('input', function () {
            let data = $(this).val()
            $.ajax({
                url: '',
                type: 'post',
                data: {'username':data},
                success: function (args) {
                    $('#name').text(args)
                }
            })
        })
    </script>
</body>
</html>

後端：

def index(request):
    if request.is_ajax():  # 判斷是否是ajax請求
        if request.method == 'POST':
            data = request.POST
            return HttpResponse(data.get('username'))

    return render(request, 'index.html')

前後端傳輸資料編碼格式

前端傳輸資料編碼格式可以從按F12檢視網路請求。

form表單預設傳送的編碼格式

Content-Type：application/x-www-form-urlencoded。

資料格式舉例：username=jason&password=123。

django後端會自動處理到request.POST接收。

form表單傳送檔案

Content-Type：multipart/form-data。

資料格式：隱藏不讓看。

django後端會自動處理：request.POST接收其他，request.FILES接收檔案資訊。

ajax預設的編碼格式

Content-Type：application/x-www-form-urlencoded。

資料格式舉例：username=jason&password=123。

django後端會自動處理到request.POST接收。

ajax傳送json格式資料

Content-Type：application/json

資料格式舉例：username=jason&password=123。

django後端只會用request.body接收。

ajax傳送json格式資料

ajax傳送的資料型別一定要跟資料的編碼格式一致，如果想要傳送json格式資料就需要用到json資料的編碼格式application/json。

$.ajax({
    url: '',
    type: 'post',
    contentType: 'application/json',  // 不寫,預設是urlencoded編碼
    data: JSON.stringify({'name': 'tom'}),  // 序列化方法
    success: function (args) {
    }
})

後端只能用request.body接收，接收還需要反序列化。

def index(request):
    if request.is_ajax():
        if request.method == 'POST':
            import json
            res = json.loads(request.body)  # 反序列化
            print(res)
            return HttpResponse('666')

    return render(request, 'index.html')

ajax攜帶檔案資料

ajax如果想要把檔案傳給後端，需要利用js內建物件FormData，並且ajax需要額外指定兩個引數。

前端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<input id="file" type="file">
<button id="btn">提交</button>
<script>
    $('#btn').click(function () {
        let myFormData = new FormData()
        // 物件新增檔案資料
        myFormData.append('my_file', $('#file')[0].files[0])
        $.ajax({
            url: '',
            type: 'post',
            // 攜帶檔案必須要指定的兩個引數
            contentType: false,
            processData: false,
            data: myFormData,
            success: function (args) {
            }
        })
    })
</script>
</body>
</html>

後端要用request.FILES獲取

def index(request):
    if request.is_ajax():
        if request.method == 'POST':
            # 獲取檔案資訊
            print(request.FILES.get('my_file'))
    return render(request, 'index.html')