使用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操作MySQL数据库的方法分享
May 29 Python
python中使用xlrd、xlwt操作excel表格详解
Jan 29 Python
用TensorFlow实现lasso回归和岭回归算法的示例
May 02 Python
python面试题之列表声明实例分析
Jul 08 Python
Python+pyplot绘制带文本标注的柱状图方法
Jul 08 Python
Django admin禁用编辑链接和添加删除操作详解
Nov 15 Python
PYQT5开启多个线程和窗口,多线程与多窗口的交互实例
Dec 13 Python
Python中zip()函数的解释和可视化(实例详解)
Feb 16 Python
利用django model save方法对未更改的字段依然进行了保存
Mar 28 Python
python3.6.5基于kerberos认证的hive和hdfs连接调用方式
Jun 06 Python
python如何利用paramiko执行服务器命令
Nov 07 Python
Python就将所有的英文单词首字母变成大写
Feb 12 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中var_export与var_dump的区别分析
2010/08/21 PHP
PHP批量生成图片缩略图的方法
2015/06/18 PHP
php批量删除超链接的实现方法
2015/10/19 PHP
仅img元素创建后不添加到文档中会执行onload事件的解决方法
2011/07/31 Javascript
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
使用js画图之正弦曲线
2015/01/12 Javascript
JavaScript驾驭网页-获取网页元素
2016/03/24 Javascript
Vue.js 表单校验插件
2016/08/14 Javascript
vue-router:嵌套路由的使用方法
2017/02/21 Javascript
令按钮悬浮在(手机)页面底部的实现方法
2017/05/02 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
2018/07/04 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
2018/12/28 Javascript
为vue项目自动设置请求状态的配置方法
2019/06/09 Javascript
Vue将页面导出为图片或者PDF
2020/08/17 Javascript
layui按条件隐藏表格列的实例
2019/09/19 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
2019/09/23 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
2019/11/20 Javascript
JavaScript进制转换实现方法解析
2020/01/18 Javascript
谈谈Python进行验证码识别的一些想法
2016/01/25 Python
Python编程实现二叉树及七种遍历方法详解
2017/06/02 Python
python如何定义带参数的装饰器
2018/03/20 Python
简单谈谈Python的pycurl模块
2018/04/07 Python
Python 实现在文件中的每一行添加一个逗号
2018/04/29 Python
Python命令行click参数用法解析
2019/12/19 Python
Python3中的tuple函数知识点讲解
2021/01/03 Python
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
英语专业毕业个人求职自荐信
2013/09/21 职场文书
企业管理部经理岗位职责
2013/12/24 职场文书
集体婚礼证婚词
2014/01/13 职场文书
项目建议书模板
2014/05/12 职场文书
2015年党员承诺书
2015/01/21 职场文书
2016大学军训心得体会
2016/01/11 职场文书
聊聊JS ES6中的解构
2021/04/29 Javascript
浅谈MySQL中的六种日志
2022/03/23 MySQL
CSS link与@import的区别和用法解析
2023/05/07 HTML / CSS