如何利用AJAX获取Django后端数据详解
作者:运维派 发布时间:2022-06-13 13:51:43
使用Django服务网页时,只要用户执行导致页面更改的操作,即使该更改仅影响页面的一小部分,它都会将完整的HTML模板传递给浏览器。但是如果我们只想更新页面的一部分,则不必完全重新渲染页面-这时候就要用到AJAX了。
使用AJAX获取Django后端数据插图
AJAX提供了一种将GET或POST请求发送到Django视图并接收任何返回的数据而无需刷新页面的方法。现代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
})
Python
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请求
我们需要一个视图来处理来 * tch调用的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,该序列将数据字典序列化并将其发送回我们的页面,在此页面中将通过链接进行处理。现在,我们可以使用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及更高版本
在即将发布的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.yunweipai.com/39829.html
猜你喜欢
- 本文实例为大家分享了python将两张图片生成全景图片的具体代码,供大家参考,具体内容如下1、全景图片的介绍全景图通过广角的表现手段以及绘画
- 如下所示:func Caller(skip int) (pc uintptr, file string, line int, ok bool
- python基础pandas的drop()用法做数据处理得时候用到了pandas,体验不错,记录如下:import pandas as pd
- 本文实例讲述了flask框架配置mysql数据库操作。分享给大家供大家参考,具体如下:该篇博客配置环境为:python版本3.5,flask
- Python3中的map()、reduce()、filter() 这3个一般是用于对序列进行操作的内置函数,它们经常需要与 匿名函数 lam
- 本文讲述了Python检测网络延迟的代码。分享给大家供大家参考,具体如下:#!/usr/bin/env python # coding: u
- <div id="outer" style="background:#099"> cli
- 1.新建项目新建一个项目,fileànewàproject如下图:选择Java&agra
- 密码规则:它至少包含 8 个字符,最多包含 20 个字符。它至少包含一个数字。它至少包含一个大写字母。它至少包含一个小写字母。它至少包含一个
- 在对列表的元素进行找寻时,会频繁的说到遍历的理念。对于复杂的遍历要求,如多个列表中查找就显然不适合用for循环。本篇所要带来的是zip()
- 本文实例讲述了python使用自定义user-agent抓取网页的方法。分享给大家供大家参考。具体如下:下面python代码通过urllib
- 此篇博客学习的api如标题,分别是:current_url获取当前页面的url;page_source 获取当前页面的源码;ti
- 有时候想为我们的网页提供多语言支持,如果一种语言用一张网页来做实在太麻烦了,幸好Google提供了语言工具功能,下面介绍如何利用它来实现网页
- 浏览器中某些计算和处理要比其他的昂贵的多。例如,DOM操作比起非DOM交互需要更多的内存和CPU时间。连续尝试进行过多的DOM相关操作可能会
- 一、window环境A. 导出.sql1. 导出整个数据库mysqldump -u 用户名 -p 数据库名 > 导出的文件名mysql
- 通过学习借鉴朋友的实现方法进行整理,实现了PHP版的微信公共平台消息主动推送,分享给大家供大家参考,具体内容如下此方法是通过模拟登录微信公共
- sqlserver安装完之后(安装参考)我遇到了一个尴尬的问题:之前的安装时是windows选择身份验证的,所以用可视化工具连接到服务器是,
- 如何做一个文本搜索? 比较简单,见下:<%Head = "搜索"SearchStri
- Python是一门清晰简洁的语言,如果你对一些细节不了解的话,就会掉入到那些深不见底的“坑”里,下面,我就来总结一些Python里常见的坑。
- HMAC 算法可用于验证在应用程序之间传递或存储在潜在易受攻击位置的信息的完整性。基本思想是生成与共享密钥组合的实际数据的加密散列。然后,可