django返回ajaxhtml,使⽤AJAX和Django获取数据的⽅法实例前⾔
php激活码永久使⽤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 => {
排序算法c++代码//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. (...)
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 => {
python请求并解析json数据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 (kie && kie !== '') {
const cookies = kie.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):
fighting是加油的意思吗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,
}
grunt扮演者文苡帆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⾏代码:
('x-requested-with') == 'XMLHttpRequest'
现在,我们可以编辑视图以包括此检查:
def ajax_view(request):
if ('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。 正确⽽谨慎地使⽤它,可以使我们的页⾯感觉更快,并为⽤户提供更多的交互体验。
总结
到此这篇关于使⽤AJAX和Django获取数据的⽂章就介绍到这了,更多相关AJAX和Django获取数据内容请搜索脚本之家以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持脚本之家!
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论