七、django的Ajax

阿新 • • 發佈：2021-01-06

技術標籤：django之路

文章目錄

簡介

總結下向服務端傳送請求的方式

瀏覽器位址列直接輸入url回車（實現GET請求）
a標籤href屬性（實現GET請求）
form表單（實現GET或者POST請求）
ajax（實現GET或者POST請求）

AJAX 相比較其他三種方式，最大的優點是在不重新載入整個頁面的情況下，可以與伺服器交換資料並更新部分網頁內容。（這個特點讓使用者無感知的情況下完成了請求和響應過程）

Ajax我們只學習jQuery封裝之後的版本(不學原生的原生的複雜並且在實際專案中也一般不用)，所以我們在前端頁面使用ajax的時候需要確保匯入了jQuery

AJAX 不是新的程式語言，而是一種使用現有標準的新方法(類似於裝飾器)

ps:並不只有jQuery能夠實現ajax，其他的框架也可以但是換湯不換藥原理是一樣的

例項演示

下面用一個小例子講解Ajax，讓我們對Ajax有個簡單的瞭解。

例子要求：

頁面上有三個input框
在前兩個框中輸入數字點選按鈕朝後端傳送ajax請求
後端計算出結果再返回給前端動態展示的到第三個input框中

因需要涉及前端編寫ajax，所以先從前端模板層開始寫

模板檔案ajax.html內容如下：

<!DOCTYPE html>
<html lang="en">
< 
head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script 
>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <input type="text" id="d1"> +
    <input type="text" id="d2"> =
    <input type="text" id="d3">
    <p>
        <button id="btn">點我</button>
    </p>

    <script>
        // 先給按鈕繫結一個點選事件
        $('#btn').click(function () {
            // 朝後端傳送ajax請求
            $.ajax({
                // 1.指定朝哪個後端傳送ajax請求
                url:'', // 不寫就是朝當前地址提交
                // 2.請求方式
                type:'post',  // 不指定預設就是get 都是小寫
                // 3.資料
                data:{'i1':$('#d1').val(),'i2':$('#d2').val()},
                // 4.回撥函式:當後端給你返回結果的時候會自動觸發 args接受後端的返回結果
                success:function (args) {
                    $('#d3').val(args)
                }
            })
        })
    </script>
</body>
</html>

部分檢視層views.py檔案內容：

def ajax(request):
    if request.method=="POST":
        i3=int(request.POST.get('i1'))+int(request.POST.get('i2'))
        print(i3)
        return HttpResponse(i3)
    return render(request,'app01/ajax.html')

前後端傳輸資料的編碼格式

# 我們主要研究post請求資料的編碼格式
"""
get請求資料就是直接放在url後面的
url?username=jason&password=123
"""

# 可以向後端傳送post請求的方式
	"""
	1.form表單
	2.ajax請求
	"""

  
"""
前後端傳輸資料的編碼格式
	urlencoded
	
	formdata
	
	json
"""
# 研究form表單
預設的資料編碼格式是urlencoded
	在http報文中的資料格式:username=jason&password=123
	django後端針對符合urlencoded編碼格式的資料都會自動幫你解析，並封裝到request.POST中
	  	
  
如果你把編碼格式改成formdata，那麼針對普通的鍵值對還是解析並封裝到request.POST中，而將檔案解析並封裝到request.FILES中
  

form表單是沒有辦法傳送json格式資料的，ajax可以傳送json格式資料到後端

研究ajax

ajax傳送json資料

預設的編碼格式也是urlencoded
  在http報文中的資料格式:username=jason&age=20
  django後端針對符合urlencoded編碼格式的資料都會自動幫你解析，並封裝到request.POST中

ajax傳送json資料

"""
ajax傳送json格式資料需要注意
	1.contentType引數指定成:application/json
	2.資料是真正的json格式資料
	3.django後端不會幫你處理json格式資料需要你自己去request.body獲取並處理
"""
request物件方法補充
	request.is_ajax()  判斷當前請求是否是ajax請求 返回布林值


ajax前端頁面ab_json.html內容如下：

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

<script>
    $('#d1').click(function () {
        $.ajax({
            url:'',
            type:'post',
            data:JSON.stringify({'username':'jason','age':25}),
            // JSON.stringify將資料系列化為json格式，符合contenttype
            contentType:'application/json',  // 指定編碼格式
            success:function () {

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


ab_json.html對應的檢視函式：
def ab_json(request):
    if request.is_ajax():
        # 針對json格式資料需要你自己手動處理
        json_bytes = request.body
        # json.loads括號內如果傳入了一個二進位制格式的資料那麼內部自動解碼再反序列化
        json_dict = json.loads(json_bytes)  
        print(json_dict,type(json_dict))  
        # {'username': 'jason', 'age': 25} <class 'dict'>
    return render(request,'app01/ab_json.html')

ajax傳送檔案

"""
ajax傳送檔案需要注意
	1.需要利用JS內建類FormData，生成一個物件formDateObj
		  
	2.向物件formDateObj新增檔案物件
	       formDateObj.append()
		   也可以通過append()新增鍵值對
		   
	3.需要指定兩個關鍵性的引數
		   contentType:false,  // 不需使用任何編碼 django後端能夠自動識別formdata物件
	       processData:false,  // 告訴你的瀏覽器不要對你的資料進行任何處理
	       
	4.django後端能夠直接識別到formdata物件並且能夠將內部的普通鍵值自動解析並封裝到request.POST中，檔案資料自動解析並封裝到request.FILES中
"""

ajax前端頁面ab_file.html內容如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<p>username:<input type="text" id="d1"></p>
<p>password:<input type="text" id="d2"></p>
<p><input type="file" id="d3"></p>
<button class="btn btn-info" id="d4">點我</button>

<script>
    // 點選按鈕朝後端傳送普通鍵值對和檔案資料
    $('#d4').on('click',function () {
        // 1 需要先利用FormData內建物件
        let formDateObj = new FormData();
        // 2 新增普通的鍵值對
        formDateObj.append('username',$('#d1').val());
        formDateObj.append('password',$('#d2').val());
        // 3 新增檔案物件
        formDateObj.append('myfile',$('#d3')[0].files[0])
        // 4 將物件基於ajax傳送給後端
        $.ajax({
            url:'',
            type:'post',
            data:formDateObj,  // 直接將物件放在data後面即可

            // ajax傳送檔案必須要指定的兩個引數
            contentType:false,  // 不需使用任何編碼 django後端能夠自動識別formdata物件
            processData:false,  // 告訴你的瀏覽器不要對你的資料進行任何處理

            success:function (args) {
            }
        })
    })
</script>
</body>
</html>

ab_file.html對應的檢視函式：

def ab_file(request):
    if request.is_ajax():
        if request.method == 'POST':
            print(request.POST)
            print(request.FILES)
    return render(request,'ab_file.html')