使用AJAX获取Django后端数据

 使用Django服务网页时，只要用户执行导致页面更改的操作，即使该更改仅影响页面的一小部分，它都会将完整的HTML模板传递给浏览器。但是如果我们只想更新页面的一部分，则不必完全重新渲染页面-这时候就要用到AJAX了。

成都网站设计、成都网站制作的关注点不是能为您做些什么网站，而是怎么做网站，有没有做好网站，给成都创新互联一个展示的机会来证明自己，这并不会花费您太多时间，或许会给您带来新的灵感和惊喜。面向用户友好，注重用户体验，一切以用户为中心。

AJAX提供了一种将GET或POST请求发送到Django视图并接收任何返回的数据而无需刷新页面的方法。现代JavaScript包含fetch API，该API为我们提供了一种纯JavaScript方式来发送AJAX请求。

让我们看一下如何通过获取发出GET和POST请求，以在视图和模板之间传递JSON数据。

GET请求

  •  通过获取发出GET请求

通过向其提供视图的URL和适当的headers参数来进行获取GET请求。发出请求后，视图返回请求的数据，然后需要将响应转换为JSON，然后才能将其用于其他操作。 

 
 
 
    
  
  
  
  1. fetch(URL, {  
    2. 
  
  
  
  2.       headers:{  
    3. 
  
  
  
  3.           'Accept': 'application/json',  
    4. 
  
  
  
  4.           'X-Requested-With': 'XMLHttpRequest', //Necessary to work with request.is_ajax()  
    5. 
  
  
  
  5.       },  
    6. 
  
  
  
  6.   })  
    7. 
  
  
  
  7.   .then(response => {  
    8. 
  
  
  
  8.       return response.json() //Convert response to JSON  
    9. 
  
  
  
  9.   })  
    10. 
  
  
  
  10.   .then(data => {  
    11. 
  
  
  
  11.       //Perform actions with the response data from the view  
    12. 
  
  
  
  12.   }) 
    13.

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. # views.py  
    2. 
  
  
  
  2. from django.http import JsonResponse  
    3. 
  
  
  
  3. def ajax_get_view(request): # May include more arguments depending on URL parameters  
    4. 
  
  
  
  4.     # Get data from the database - Ex. Model.object.get(...)  
    5. 
  
  
  
  5.     data = {  
    6. 
  
  
  
  6.             'my_data':data_to_display  
    7. 
  
  
  
  7.     }  
    8. 
  
  
  
  8.     return JsonResponse(data) 
    9.

如果通过包含附加参数的URL访问该视图，则这些附加参数也将与请求一起包含在功能参数列表中。将根据那些URL参数或查询字符串（如果使用的话）从数据库中检索数据。我们要发送回页面的数据必须在使用JsonResponse。调用之前，请确保从django.http导入JsonResponse。

该视图将返回JsonResponse，该序列将数据字典序列化并将其发送回我们的页面，在此页面中将通过链接进行处理。现在，我们可以使用JavaScript使用GET请求中的数据来更新页面的一部分。

POST请求

  •  通过提取发出POST请求

带GET的POST请求比GET请求需要更多的参数。 

 
 
 
    
  
  
  
  1. fetch(URL, {  
    2. 
  
  
  
  2.       method: 'POST',  
    3. 
  
  
  
  3.       credentials: 'same-origin',  
    4. 
  
  
  
  4.       headers:{  
    5. 
  
  
  
  5.           'Accept': 'application/json',  
    6. 
  
  
  
  6.           'X-Requested-With': 'XMLHttpRequest', //Necessary to work with request.is_ajax()  
    7. 
  
  
  
  7.           'X-CSRFToken': csrftoken,  
    8. 
  
  
  
  8.   },  
    9. 
  
  
  
  9.       body: JSON.stringify({'post_data':'Data to post'}) //JavaScript object of data to POST  
    10. 
  
  
  
  10.   })  
    11. 
  
  
  
  11.   .then(response => {  
    12. 
  
  
  
  12.         return response.json() //Convert response to JSON  
    13. 
  
  
  
  13.   }) 
    14. 
  
  
  
  14.   .then(data => {  
    15. 
  
  
  
  15.   //Perform actions with the response data from the view  
    16. 
  
  
  
  16.   }) 
    17.

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. function getCookie(name) {  
    2. 
  
  
  
  2.       let cookieValue = null;  
    3. 
  
  
  
  3.       if (document.cookie && document.cookie !== '') {  
    4. 
  
  
  
  4.           const cookies = document.cookie.split(';');  
    5. 
  
  
  
  5.           for (let i = 0; i < cookies.length; i++) {  
    6. 
  
  
  
  6.               const cookie = cookies[i].trim();  
    7. 
  
  
  
  7.               // Does this cookie string begin with the name we want?  
    8. 
  
  
  
  8.               if (cookie.substring(0, name.length + 1) === (name + '=')) {  
    9. 
  
  
  
  9.                   cookieValue = decodeURIComponent(cookie.substring(name.length + 1));  
    10. 
  
  
  
  10.                   break;  
    11. 
  
  
  
  11.               }  
    12. 
  
  
  
  12.           }  
    13. 
  
  
  
  13.       }  
    14. 
  
  
  
  14.       return cookieValue;  
    15. 
  
  
  
  15.   } 
    16. 
  
  
  
  16.    const csrftoken = getCookie('csrftoken'); 
    17.

现在我们有了csrftoken，我们将其添加到标头中作为“X-CSRFToken”：csrftoken。

BODY

POST请求的目标是将数据发送到视图并更新数据库。这意味着我们还需要在fetch调用中包含数据。假设我们要发送JSON数据，我们添加主体：JSON.stringify（data）其中data是我们要发送的数据的JavaScript对象。除了JSON数据（包括文件和来自表单的数据）外，其他数据也可以在正文中发送。有关如何包含其他类型的数据的更多信息，请参见MDN文档。

我们从POST请求中获得的响应将像GET请求一样使用链式承诺进行处理。

在视图中处理POST请求

接受POST请求的视图将从请求中获取数据，对其执行一些操作，然后返回响应。 

 
 
 
    
  
  
  
  1. # views.py  
    2. 
  
  
  
  2. from django.http import JsonResponse  
    3. 
  
  
  
  3. import json  
    4. 
  
  
  
  4. def ajax_post_view(request):  
    5. 
  
  
  
  5.     data_from_post = json.load(request)['post_data'] #Get data from POST request  
    6. 
  
  
  
  6.     #Do something with the data from the POST request  
    7. 
  
  
  
  7.     #If sending data back to the view, create the data dictionary  
    8. 
  
  
  
  8.     data = {  
    9. 
  
  
  
  9.         'my_data':data_to_display,  
    10. 
  
  
  
  10.     }  
    11. 
  
  
  
  11.     return JsonResponse(data) 
    12.

我们需要从AJAX请求中提取数据才能使用它。数据以JSON格式发送，因此我们需要使用json.load（request）将其加载到视图中。这需要从Python标准库中导入json模块。结果是我们通过提取发送的数据的字典。现在，我们可以通过其键访问数据。

一旦获得了请求中的数据，我们就可以执行用户希望启动AJAX请求的操作。这可能是创建模型的新实例或更新现有实例。

与GET请求一样，可以使用JsonResponse和带有数据的字典将数据发送回页面。这可以是新的或更新的模型对象，也可以是成功消息。

确保请求是AJAX

在大多数情况下，都会发出AJAX请求，因为我们只希望更新页面的一部分，并且需要获取新数据来进行更新。在页面上下文之外，JsonResponse返回的数据本身很少使用。但是，如果我们没有正确设置视图，则可以在AJAX请求之外访问数据，并且不会像我们期望的那样将其呈现给用户。

为了防止这种情况的发生，我们可以使用request.is_ajax（）方法在视图中添加检查以确保该请求是AJAX请求。 

 
 
 
    
  
  
  
  1. # views.py  
    2. 
  
  
  
  2. from django.http import JsonResponse  
    3. 
  
  
  
  3. def ajax_view(request):  
    4. 
  
  
  
  4.     if request.is_ajax():  
    5. 
  
  
  
  5.         data = {  
    6. 
  
  
  
  6.                 'my_data':data_to_display  
    7. 
  
  
  
  7.         }  
    8. 
  
  
  
  8.         return JsonResponse(data) 
    9.

这使用“ 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' 
    2.

现在，我们可以编辑视图以包括此检查： 

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

一些重要注意事项

尽管获取是发出AJAX请求的便捷方法，但并非所有浏览器（即所有版本的InternetExplorer）都支持提取。如果需要支持IE，请查看jQuery或XMLHttpRequest来发出AJAX请求。

AJAX请求应仅限于Django项目的一小部分。如果发现自己在多个模板中使用它们来获取大量数据，请考虑使用Django Rest Framework创建API。

总结

通过在Django项目中使用AJAX请求，我们可以更改页面的某些部分而无需重新加载整个页面。提取API使添加此功能相当轻松，同时需要最少的JavaScript。正确而谨慎地使用它，可以使我们的页面感觉更快，并为用户提供更多的交互体验。

分享文章：使用AJAX获取Django后端数据
URL地址：http://www.shufengxianlan.com/qtweb/news4/60254.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

定制开发知识

分类信息网

重庆水土三线托管　　 　雅安做网站　　 　网络推广外包　　 　成都搅拌罐车　　 　广汉锦华建材　　 　成都网络营销　　 　响应式网站设计　　 　成都服务器租用　　 　成都做网站　　 　等级保护测评　　 　网站设计　　 　胜锦安防科技　　 　IDC机房托管　　 　温江服务器托管　　 　网站建设公司　　 　门户网站建设方案　　 　复盛机电设备安装　　 　创新互联重庆　　 　成都服务器机柜租用　　 　自适应网站建设