使用Django服務網頁時，只要用戶執行導致頁面更改的操作，即使該更改僅影響頁面的一小部分，它都會將完整的HTML模板傳遞給瀏覽器。但是如果我們只想更新頁面的一部分，則不必完全重新渲染頁面-這時候就要用到AJAX了。
使用AJAX獲取Django后端數據插圖
AJAX提供了一種將GET或POST請求發送到Django視圖并接收任何返回的數據而無需刷新頁面的方法。現代JavaScript包含fetch API，該API為我們提供了一種純JavaScript方式來發送AJAX請求。
讓我們看一下如何通過獲取發出GET和POST請求，以在視圖和模板之間傳遞JSON數據。
GET請求
- 通過獲取發出GET請求
通過向其提供視圖的URL和適當的headers參數來進行獲取GET請求。發出請求后，視圖返回請求的數據，然后需要將響應轉換為JSON，然后才能將其用于其他操作。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
fetch(URL, { headers:{ 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest', //Necessary to work with request.is_ajax() }, }) .then(response => { return response.json() //Convert response to JSON }) .then(data => { //Perform actions with the response data from the view })Python |
URL
提取將URL作為其第一個參數。根據Django項目的URLconf和視圖的配置方式，URL可能包含關鍵字參數或查詢字符串，我們希望在視圖中使用該參數來選擇請求的數據。
Headers
設置AJAX請求頭參數。我們希望數據以JSON形式從視圖返回，因此我們將Accept參數設置為application/json。在視圖中，我們可能要確保該請求是AJAX請求。通過將設置為“XMLHttpRequest”的“X-Requested-With”標頭包括在內，該視圖將能夠檢查請求是否為AJAX。
get不會直接返回數據。它將返回一個response，該response將返回所請求的響應。為了從響應中獲取數據，我們必須通過多次使用.then處理程序來使用鏈式response。第一個.then接收已解析的響應并將其轉換為JSON。第二個.then允許我們訪問第一個.then返回的數據，并允許我們使用它，然后可以處理這個數據，比如進行更新頁面操作。
在視圖中處理GET請求
我們需要一個視圖來處理來自fetch調用的AJAX請求。這可以通過多種方式完成，但是最簡單的方法之一就是使用基于函數的視圖，該視圖接受請求并返回帶有請求數據的JsonResponse。
|
1
2
3
4
5
6
7
8
9
|
# views.pyfrom django.http import JsonResponsedef ajax_get_view(request): # May include more arguments depending on URL parameters # Get data from the database - Ex. Model.object.get(...) data = { 'my_data':data_to_display } return JsonResponse(data) |
如果通過包含附加參數的URL訪問該視圖，則這些附加參數也將與請求一起包含在功能參數列表中。 將根據那些URL參數或查詢字符串（如果使用的話）從數據庫中檢索數據。我們要發送回頁面的數據必須在使用JsonResponse。 調用之前，請確保從django.http導入JsonResponse。
該視圖將返回JsonResponse，該序列將數據字典序列化并將其發送回我們的頁面，在此頁面中將通過鏈接進行處理。現在，我們可以使用JavaScript使用GET請求中的數據來更新頁面的一部分。
POST請求
通過提取發出POST請求
帶GET的POST請求比GET請求需要更多的參數。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
fetch(URL, { method: 'POST', credentials: 'same-origin', headers:{ 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest', //Necessary to work with request.is_ajax() 'X-CSRFToken': csrftoken, }, body: JSON.stringify({'post_data':'Data to post'}) //JavaScript object of data to POST }) .then(response => { return response.json() //Convert response to JSON }) .then(data => { //Perform actions with the response data from the view }) |
Method
默認為發出GET請求。我們必須通過添加方法“ POST”來明確地告訴它發出POST請求。
Credentials
我們需要指定如何在請求中發送憑據。憑證可能很棘手，特別是如果項目的前端和后端分別托管。如果AJAX請求是通過與后端其他位置相同的模板提供的，我們可以使用默認值“ same-origin”。這意味著，如果所請求的URL與提取調用來自同一站點，則將在請求中發送用戶憑據。如果前端和后端不在某個位置，則需要使用不同的憑據設置，并且需要考慮跨域資源共享（CORS）。
Headers
“ Accept”和“ X-Requested-With”標頭與GET請求的標頭相同，但是現在必須包括一個附加的“ X-CSRFToken”標頭。
向Django發出POST請求時，我們需要包含csrf令牌以防止跨站點請求偽造攻擊。Django文檔提供了我們需要添加的確切JavaScript代碼，以從csrftoken cookie中獲取令牌。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
function getCookie(name) { let cookieValue = null; if (document.cookie && document.cookie !== '') { const cookies = document.cookie.split(';'); for (let i = 0; i < cookies.length; i++) { const cookie = cookies[i].trim(); // Does this cookie string begin with the name we want? if (cookie.substring(0, name.length + 1) === (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } const csrftoken = getCookie('csrftoken'); |
現在我們有了csrftoken，我們將其添加到標頭中作為“X-CSRFToken”：csrftoken。
BODY
POST請求的目標是將數據發送到視圖并更新數據庫。 這意味著我們還需要在fetch調用中包含數據。 假設我們要發送JSON數據，我們添加主體：JSON.stringify（data）其中data是我們要發送的數據的JavaScript對象。 除了JSON數據（包括文件和來自表單的數據）外，其他數據也可以在正文中發送。 有關如何包含其他類型的數據的更多信息，請參見MDN文檔。
我們從POST請求中獲得的響應將像GET請求一樣使用鏈式承諾進行處理。
在視圖中處理POST請求
接受POST請求的視圖將從請求中獲取數據，對其執行一些操作，然后返回響應。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
# views.pyfrom django.http import JsonResponseimport jsondef ajax_post_view(request): data_from_post = json.load(request)['post_data'] #Get data from POST request #Do something with the data from the POST request #If sending data back to the view, create the data dictionary data = { 'my_data':data_to_display, } return JsonResponse(data) |
我們需要從AJAX請求中提取數據才能使用它。數據以JSON格式發送，因此我們需要使用json.load（request）將其加載到視圖中。這需要從Python標準庫中導入json模塊。結果是我們通過提取發送的數據的字典。現在，我們可以通過其鍵訪問數據。
一旦獲得了請求中的數據，我們就可以執行用戶希望啟動AJAX請求的操作。這可能是創建模型的新實例或更新現有實例。
與GET請求一樣，可以使用JsonResponse和帶有數據的字典將數據發送回頁面。這可以是新的或更新的模型對象，也可以是成功消息。
確保請求是AJAX
在大多數情況下，都會發出AJAX請求，因為我們只希望更新頁面的一部分，并且需要獲取新數據來進行更新。在頁面上下文之外，JsonResponse返回的數據本身很少使用。但是，如果我們沒有正確設置視圖，則可以在AJAX請求之外訪問數據，并且不會像我們期望的那樣將其呈現給用戶。
為了防止這種情況的發生，我們可以使用request.is_ajax（）方法在視圖中添加檢查以確保該請求是AJAX請求。
|
1
2
3
4
5
6
7
8
9
|
# views.pyfrom django.http import JsonResponsedef ajax_view(request): if request.is_ajax(): data = { 'my_data':data_to_display } return JsonResponse(data) |
這使用“ X-Requested-With”標頭來確定請求是否由AJAX發起。 如果嘗試通過直接在瀏覽器中鍵入URL來訪問此視圖，則會收到錯誤消息。可以向視圖中添加其他邏輯（例如重定向），以防止用戶嘗試在沒有AJAX請求的情況下訪問視圖時看到錯誤。
Django 3.1及更高版本
在即將發布的Django3.1版本（2020年8月）中，request.is_ajax（）將被棄用。 這意味著如果我們要檢查AJAX請求，則必須自己重新創建功能。 幸運的是，Django開發人員確切地告訴我們我們需要做什么。 我們必須自己從request.is_ajax（）方法重新創建邏輯，該邏輯只有1行代碼：
|
1
|
request.headers.get('x-requested-with') == 'XMLHttpRequest' |
現在，我們可以編輯視圖以包括此檢查：
|
1
2
3
4
|
def ajax_view(request): if request.headers.get('x-requested-with') == 'XMLHttpRequest': # Get requested data and create data dictionary return JsonResponse(data)) |
一些重要注意事項
盡管獲取是發出AJAX請求的便捷方法，但并非所有瀏覽器（即所有版本的InternetExplorer）都支持提取。如果需要支持IE，請查看jQuery或XMLHttpRequest來發出AJAX請求。
AJAX請求應僅限于Django項目的一小部分。如果發現自己在多個模板中使用它們來獲取大量數據，請考慮使用Django Rest Framework創建API。
總結
通過在Django項目中使用AJAX請求，我們可以更改頁面的某些部分而無需重新加載整個頁面。提取API使添加此功能相當輕松，同時需要最少的JavaScript。正確而謹慎地使用它，可以使我們的頁面感覺更快，并為用戶提供更多的交互體驗。
到此這篇關于如何利用AJAX獲取Django后端數據的文章就介紹到這了,更多相關AJAX獲取Django后端數據內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：http://www.yunweipai.com/39829.html
