1. <th id="orwrz"></th>
        <tbody id="orwrz"><pre id="orwrz"></pre></tbody>
      2. <rp id="orwrz"><object id="orwrz"></object></rp>
        首頁 編程技術使用AJAX獲取Django后端數據

        使用AJAX獲取Django后端數據

        運維派隸屬馬哥教育旗下專業運維社區,是國內成立最早的IT運維技術社區,歡迎關注公眾號:yunweipai
        領取學習更多免費Linux云計算、Python、Docker、K8s教程關注公眾號:馬哥linux運維

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

        使用AJAX獲取Django后端數據插圖

        AJAX提供了一種將GET或POST請求發送到Django視圖并接收任何返回的數據而無需刷新頁面的方法?,F代JavaScript包含fetch API,該API為我們提供了一種純JavaScript方式來發送AJAX請求。

        讓我們看一下如何通過獲取發出GET和POST請求,以在視圖和模板之間傳遞JSON數據。

        GET請求

        • 通過獲取發出GET請求

        通過向其提供視圖的URL和適當的headers參數來進行獲取GET請求。發出請求后,視圖返回請求的數據,然后需要將響應轉換為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作為其第一個參數。根據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。

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

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

        該視圖將返回JsonResponse,該序列將數據字典序列化并將其發送回我們的頁面,在此頁面中將通過鏈接進行處理?,F在,我們可以使用JavaScript使用GET請求中的數據來更新頁面的一部分。

        POST請求

        • 通過提取發出POST請求

        帶GET的POST請求比GET請求需要更多的參數。

        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中獲取令牌。

        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請求的視圖將從請求中獲取數據,對其執行一些操作,然后返回響應。

        # 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請求中提取數據才能使用它。數據以JSON格式發送,因此我們需要使用json.load(request)將其加載到視圖中。這需要從Python標準庫中導入json模塊。結果是我們通過提取發送的數據的字典?,F在,我們可以通過其鍵訪問數據。

        一旦獲得了請求中的數據,我們就可以執行用戶希望啟動AJAX請求的操作。這可能是創建模型的新實例或更新現有實例。

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

        確保請求是AJAX

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

        為了防止這種情況的發生,我們可以使用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”標頭來確定請求是否由AJAX發起。 如果嘗試通過直接在瀏覽器中鍵入URL來訪問此視圖,則會收到錯誤消息??梢韵蛞晥D中添加其他邏輯(例如重定向),以防止用戶嘗試在沒有AJAX請求的情況下訪問視圖時看到錯誤。

        Django 3.1及更高版本

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

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

        現在,我們可以編輯視圖以包括此檢查:

        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。正確而謹慎地使用它,可以使我們的頁面感覺更快,并為用戶提供更多的交互體驗。

        本文鏈接:http://www.abandonstatusquo.com/39829.html

        網友評論comments

        發表評論

        您的電子郵箱地址不會被公開。

        1. iMJMJ說道:

          支持,不錯的文章

        Copyright ? 2012-2022 YUNWEIPAI.COM - 運維派 京ICP備16064699號-6
        掃二維碼
        掃二維碼
        返回頂部
        十分钟免费观看视频高清下载