這篇文章主要介紹“如何使用AJAX獲取Django后端數(shù)據(jù)”，在日常操作中，相信很多人在如何使用AJAX獲取Django后端數(shù)據(jù)問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何使用AJAX獲取Django后端數(shù)據(jù)”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

創(chuàng)新互聯(lián)專注于庫倫網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供庫倫營銷型網(wǎng)站建設(shè)，庫倫網(wǎng)站制作、庫倫網(wǎng)頁設(shè)計、庫倫網(wǎng)站官網(wǎng)定制、小程序開發(fā)服務(wù)，打造庫倫網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供庫倫網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

使用Django服務(wù)網(wǎng)頁時，只要用戶執(zhí)行導(dǎo)致頁面更改的操作，即使該更改僅影響頁面的一小部分，它都會將完整的HTML模板傳遞給瀏覽器。但是如果我們只想更新頁面的一部分，則不必完全重新渲染頁面-這時候就要用到AJAX了。

AJAX提供了一種將GET或POST請求發(fā)送到Django視圖并接收任何返回的數(shù)據(jù)而無需刷新頁面的方法。現(xiàn)代JavaScript包含fetch API，該API為我們提供了一種純JavaScript方式來發(fā)送AJAX請求。

讓我們看一下如何通過獲取發(fā)出GET和POST請求，以在視圖和模板之間傳遞JSON數(shù)據(jù)。

GET請求

•  通過獲取發(fā)出GET請求

通過向其提供視圖的URL和適當(dāng)?shù)膆eaders參數(shù)來進(jìn)行獲取GET請求。發(fā)出請求后，視圖返回請求的數(shù)據(jù)，然后需要將響應(yīng)轉(zhuǎn)換為JSON，然后才能將其用于其他操作。

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    })

URL

提取將URL作為其第一個參數(shù)。根據(jù)Django項目的URLconf和視圖的配置方式，URL可能包含關(guān)鍵字參數(shù)或查詢字符串，我們希望在視圖中使用該參數(shù)來選擇請求的數(shù)據(jù)。

Headers

設(shè)置AJAX請求頭參數(shù)。我們希望數(shù)據(jù)以JSON形式從視圖返回，因此我們將Accept參數(shù)設(shè)置為application/json。在視圖中，我們可能要確保該請求是AJAX請求。通過將設(shè)置為“XMLHttpRequest”的“X-Requested-With”標(biāo)頭包括在內(nèi)，該視圖將能夠檢查請求是否為AJAX。

get不會直接返回數(shù)據(jù)。它將返回一個response，該response將返回所請求的響應(yīng)。為了從響應(yīng)中獲取數(shù)據(jù)，我們必須通過多次使用.then處理程序來使用鏈?zhǔn)絩esponse。第一個.then接收已解析的響應(yīng)并將其轉(zhuǎn)換為JSON。第二個.then允許我們訪問第一個.then返回的數(shù)據(jù)，并允許我們使用它，然后可以處理這個數(shù)據(jù)，比如進(jìn)行更新頁面操作。

在視圖中處理GET請求

我們需要一個視圖來處理來自fetch調(diào)用的AJAX請求。這可以通過多種方式完成，但是最簡單的方法之一就是使用基于函數(shù)的視圖，該視圖接受請求并返回帶有請求數(shù)據(jù)的JsonResponse。

# views.py  from django.http import JsonResponse  def 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)

如果通過包含附加參數(shù)的URL訪問該視圖，則這些附加參數(shù)也將與請求一起包含在功能參數(shù)列表中。將根據(jù)那些URL參數(shù)或查詢字符串（如果使用的話）從數(shù)據(jù)庫中檢索數(shù)據(jù)。我們要發(fā)送回頁面的數(shù)據(jù)必須在使用JsonResponse。調(diào)用之前，請確保從django.http導(dǎo)入JsonResponse。

該視圖將返回JsonResponse，該序列將數(shù)據(jù)字典序列化并將其發(fā)送回我們的頁面，在此頁面中將通過鏈接進(jìn)行處理。現(xiàn)在，我們可以使用JavaScript使用GET請求中的數(shù)據(jù)來更新頁面的一部分。

POST請求

•  通過提取發(fā)出POST請求

帶GET的POST請求比GET請求需要更多的參數(shù)。

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

默認(rèn)為發(fā)出GET請求。我們必須通過添加方法“ POST”來明確地告訴它發(fā)出POST請求。

Credentials

我們需要指定如何在請求中發(fā)送憑據(jù)。憑證可能很棘手，特別是如果項目的前端和后端分別托管。如果AJAX請求是通過與后端其他位置相同的模板提供的，我們可以使用默認(rèn)值“ same-origin”。這意味著，如果所請求的URL與提取調(diào)用來自同一站點，則將在請求中發(fā)送用戶憑據(jù)。如果前端和后端不在某個位置，則需要使用不同的憑據(jù)設(shè)置，并且需要考慮跨域資源共享（CORS）。

Headers

“ Accept”和“ X-Requested-With”標(biāo)頭與GET請求的標(biāo)頭相同，但是現(xiàn)在必須包括一個附加的“ X-CSRFToken”標(biāo)頭。

向Django發(fā)出POST請求時，我們需要包含csrf令牌以防止跨站點請求偽造攻擊。Django文檔提供了我們需要添加的確切JavaScript代碼，以從csrftoken cookie中獲取令牌。

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');

現(xiàn)在我們有了csrftoken，我們將其添加到標(biāo)頭中作為“X-CSRFToken”：csrftoken。

BODY

POST請求的目標(biāo)是將數(shù)據(jù)發(fā)送到視圖并更新數(shù)據(jù)庫。這意味著我們還需要在fetch調(diào)用中包含數(shù)據(jù)。假設(shè)我們要發(fā)送JSON數(shù)據(jù)，我們添加主體：JSON.stringify（data）其中data是我們要發(fā)送的數(shù)據(jù)的JavaScript對象。除了JSON數(shù)據(jù)（包括文件和來自表單的數(shù)據(jù)）外，其他數(shù)據(jù)也可以在正文中發(fā)送。有關(guān)如何包含其他類型的數(shù)據(jù)的更多信息，請參見MDN文檔。

我們從POST請求中獲得的響應(yīng)將像GET請求一樣使用鏈?zhǔn)匠兄Z進(jìn)行處理。

在視圖中處理POST請求

接受POST請求的視圖將從請求中獲取數(shù)據(jù)，對其執(zhí)行一些操作，然后返回響應(yīng)。

# views.py  from django.http import JsonResponse  import json  def 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請求中提取數(shù)據(jù)才能使用它。數(shù)據(jù)以JSON格式發(fā)送，因此我們需要使用json.load（request）將其加載到視圖中。這需要從Python標(biāo)準(zhǔn)庫中導(dǎo)入json模塊。結(jié)果是我們通過提取發(fā)送的數(shù)據(jù)的字典。現(xiàn)在，我們可以通過其鍵訪問數(shù)據(jù)。

一旦獲得了請求中的數(shù)據(jù)，我們就可以執(zhí)行用戶希望啟動AJAX請求的操作。這可能是創(chuàng)建模型的新實例或更新現(xiàn)有實例。

與GET請求一樣，可以使用JsonResponse和帶有數(shù)據(jù)的字典將數(shù)據(jù)發(fā)送回頁面。這可以是新的或更新的模型對象，也可以是成功消息。

確保請求是AJAX

在大多數(shù)情況下，都會發(fā)出AJAX請求，因為我們只希望更新頁面的一部分，并且需要獲取新數(shù)據(jù)來進(jìn)行更新。在頁面上下文之外，JsonResponse返回的數(shù)據(jù)本身很少使用。但是，如果我們沒有正確設(shè)置視圖，則可以在AJAX請求之外訪問數(shù)據(jù)，并且不會像我們期望的那樣將其呈現(xiàn)給用戶。

為了防止這種情況的發(fā)生，我們可以使用request.is_ajax（）方法在視圖中添加檢查以確保該請求是AJAX請求。

# views.py  from django.http import JsonResponse  def ajax_view(request):      if request.is_ajax():          data = {                  'my_data':data_to_display          }          return JsonResponse(data)

這使用“ X-Requested-With”標(biāo)頭來確定請求是否由AJAX發(fā)起。如果嘗試通過直接在瀏覽器中鍵入URL來訪問此視圖，則會收到錯誤消息。可以向視圖中添加其他邏輯（例如重定向），以防止用戶嘗試在沒有AJAX請求的情況下訪問視圖時看到錯誤。

Django 3.1及更高版本

在即將發(fā)布的Django3.1版本（2020年8月）中，request.is_ajax（）將被棄用。這意味著如果我們要檢查AJAX請求，則必須自己重新創(chuàng)建功能。幸運的是，Django開發(fā)人員確切地告訴我們我們需要做什么。我們必須自己從request.is_ajax（）方法重新創(chuàng)建邏輯，該邏輯只有1行代碼：

request.headers.get('x-requested-with') == 'XMLHttpRequest'

現(xiàn)在，我們可以編輯視圖以包括此檢查：

def ajax_view(request):    if request.headers.get('x-requested-with') == 'XMLHttpRequest':      # Get requested data and create data dictionary      return JsonResponse(data))

一些重要注意事項

盡管獲取是發(fā)出AJAX請求的便捷方法，但并非所有瀏覽器（即所有版本的InternetExplorer）都支持提取。如果需要支持IE，請查看jQuery或XMLHttpRequest來發(fā)出AJAX請求。

AJAX請求應(yīng)僅限于Django項目的一小部分。如果發(fā)現(xiàn)自己在多個模板中使用它們來獲取大量數(shù)據(jù)，請考慮使用Django Rest Framework創(chuàng)建API。

總結(jié)

通過在Django項目中使用AJAX請求，我們可以更改頁面的某些部分而無需重新加載整個頁面。提取API使添加此功能相當(dāng)輕松，同時需要最少的JavaScript。正確而謹(jǐn)慎地使用它，可以使我們的頁面感覺更快，并為用戶提供更多的交互體驗。

到此，關(guān)于“如何使用AJAX獲取Django后端數(shù)據(jù)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

分享名稱：如何使用AJAX獲取Django后端數(shù)據(jù)
路徑分享：http://chinadenli.net/article42/jhjehc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、網(wǎng)站設(shè)計、手機(jī)網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化、企業(yè)網(wǎng)站制作、動態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)