使用AJAX和Django获取数据的方法实例


Posted in Python onOctober 25, 2020

前言

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

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

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

GET请求

通过获取发出GET请求

通过向其提供视图的URL和适当的标头来进行带有获取的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。

提取不会直接返回数据。相反,它将返回一个承诺,该承诺将被兑现并解决所请求的响应。为了从响应中获取数据,我们必须通过多次使用.then处理程序来使用链式承诺。第一个.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,该序列将数据字典序列化并将其发送回我们的页面,在此页面中将通过链接的promise进行处理。 现在,我们可以使用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模块。结果是我们通过提取发送的数据的字典。现在,我们可以通过其键访问数据。

一旦获得了请求中的数据,我们就可以执行用户希望启动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来访问此视图,则会收到错误消息。 可以向视图中添加其他逻辑(例如重定向),以防止用户尝试在没有AJAX请求的情况下访问视图时看到错误。

Django 3.1及更高版本

在即将发布的Django 3.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请求的便捷方法,但并非所有浏览器(即所有版本的Internet Explorer)都支持提取。 如果需要支持IE,请查看jQuery或XMLHttpRequest来发出AJAX请求。

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

概要

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

原文:https://www.brennantymrak.com/articles/fetching-data-with-ajax-and-django.html

总结

到此这篇关于使用AJAX和Django获取数据的文章就介绍到这了,更多相关AJAX和Django获取数据内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Python 相关文章推荐
python批量生成本地ip地址的方法
Mar 23 Python
使用Python设置tmpfs来加速项目的教程
Apr 17 Python
好用的Python编辑器WingIDE的使用经验总结
Aug 31 Python
深入理解python中的select模块
Apr 23 Python
Python实现二叉树的常见遍历操作总结【7种方法】
Mar 06 Python
解决py2exe打包后,总是多显示一个DOS黑色窗口的问题
Jun 21 Python
centos7中安装python3.6.4的教程
Dec 11 Python
python3实现在二叉树中找出和为某一值的所有路径(推荐)
Dec 26 Python
python实现KNN近邻算法
Dec 30 Python
python将YUV420P文件转PNG图片格式的两种方法
Jan 22 Python
tensorflow中的数据类型dtype用法说明
May 26 Python
一篇文章带你了解Python和Java的正则表达式对比
Sep 15 Python
Python Tkinter实例——模拟掷骰子
Oct 24 #Python
Python+OpenCV图像处理——图像二值化的实现
Oct 24 #Python
python 下划线的不同用法
Oct 24 #Python
python 写一个性能测试工具(一)
Oct 24 #Python
Django admin组件的使用
Oct 24 #Python
Python数据可视化常用4大绘图库原理详解
Oct 23 #Python
Python+OpenCV图像处理——实现轮廓发现
Oct 23 #Python
You might like
php微信公众平台开发类实例
2015/04/01 PHP
Yii2框架中使用PHPExcel导出Excel文件的示例
2017/08/09 PHP
PHP面向对象五大原则之里氏替换原则(LSP)详解
2018/04/08 PHP
打造基于jQuery的高性能TreeView(asp.net)
2011/02/23 Javascript
JS替换文本域内的回车示例
2014/02/18 Javascript
2014 年最热门的21款JavaScript框架推荐
2014/12/25 Javascript
AngularJS基础 ng-mouseleave 指令详解
2016/08/02 Javascript
node.js中module.exports与exports用法上的区别
2016/09/02 Javascript
jQuery子元素过滤选择器用法示例
2016/09/09 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
2016/11/25 Javascript
Vue单文件组件的如何使用方式介绍
2017/07/28 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
webpack开发环境和生产环境的深入理解
2018/11/08 Javascript
nodejs 使用nodejs-websocket模块实现点对点实时通讯
2018/11/28 NodeJs
uni-app之APP和小程序微信授权方法
2019/05/09 Javascript
bootstrap Table实现合并相同行
2019/07/19 Javascript
Node.js API详解之 module模块用法实例分析
2020/05/13 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
2020/05/23 Javascript
在Django的session中使用User对象的方法
2015/07/23 Python
python实现红包裂变算法
2016/02/16 Python
Python内存管理方式和垃圾回收算法解析
2017/11/11 Python
django使用admin站点上传图片的实例
2019/07/28 Python
django 单表操作实例详解
2019/07/30 Python
使用OpenCV实现仿射变换—缩放功能
2019/08/29 Python
使用Django的JsonResponse返回数据的实现
2021/01/15 Python
金蝶的一道SQL笔试题
2012/12/18 面试题
.NET面试10题
2014/02/24 面试题
企业承诺书怎么写
2014/05/24 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
计算机多媒体专业自荐信
2014/07/04 职场文书
韩语专业职业生涯规划范文:成功之路就在我们脚下
2014/09/11 职场文书
课外活动实习计划
2015/01/19 职场文书
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python
Python+Appium自动化测试的实战
2021/06/30 Python
SpringBoot项目部署到阿里云服务器的实现步骤
2022/06/28 Java/Android
教你使用Ubuntu搭建DNS服务器
2022/09/23 Servers