显示加载gif，直到django视图执行数据处理并使用该数据呈现模板
我有一个django项目，其中的页面有多个导航链接代表不同的代理。在单击任何nav链接时，urls.py将重定向到特定于nav的视图，并且该视图需要执行一些处理以获取呈现模板所需的数据。然而，由于这是同步渲染，加载数据(大约15-20秒)需要很长时间。
下面是我的urls.py：
from django.urls import path
from . import views
app_name = 'agent'
urlpatterns = [
path('agent1/', views.agent1, name='agent1'),
path('agent2/', views.agent2, name='agent2'),
path('agent3/', views.agent3, name='agent3'),
path('agent4/', views.agent4, name='agent4'),
]我的views方法如下所示：
def agent1(request):
agent_data = Agent1.objects.all()
agent_details = get_agent_details(agent_data)
return render(request, 'manager/data.html', {'agent_data': agent_data, 'agent_details': agent_details})我在html中使用{{ agent_data.name }}、{{ agent_data.code }}、{{ agent_data.qty }}和{{ agent_data.price }}以及agent_details字典中的数据来填充表的行。我应该如何更改我的视图方法，以便它通过AJAX (javascript)加载数据，以便同时显示正在加载的gif，并为我提供数据，以便我可以填充表。谁可以帮助我的Ajax代码和步骤，因为我是这个技术的新手，没有找到任何帮助，通过在线教程。
回答 1
Stack Overflow用户
发布于 2021-01-17 05:59:42
因此，要在ajax中使用它，你需要在manager/data.html中使用一些javascript，它知道从哪个url获取数据。
例如，我有一个ajax设置，它可以检查给定的电子邮件地址是否已在使用中；
(function($) {
$(document).ready(function() {
var validateEmailURL = $section_user_signup.data('ajax-email-url');
function validateEmailUnique() {
var valid = true;
clearError($email);
// Fetch unique status of the provided email
$.ajax({
async: false,
url: validateEmailURL,
method: 'POST',
type: 'POST',
dataType: 'json',
data: {
'email': $email.val(),
'csrftoken': $form.find('input[name="csrfmiddlewaretoken"]').val()
},
success: function (response) {
valid = true;
},
error: function (response) {
setError($email, response["responseJSON"]["error"]);
valid = false;
}
});
return valid;
}
});
})(window.jQuery);这个javascript使用div的data属性来检查URL；
<div data-ajax-email-url="{% url 'account_ajax_validate_email' %}">
ajax调用转到的视图如下所示；
def ajax_check_email_unique(request, *args, **kwargs):
"""
Return an JsonResponse to identify if an email is unique.
"""
if not request.is_ajax():
return HttpResponseBadRequest()
if request.is_ajax and request.method == "POST":
email = request.POST.get('email')
if email_address_exists(email):
return JsonResponse(
{
"error":
"Email address already exists. Click "
f"<a href=\"{reverse('account_login')}\">here</a> "
"to login"
},
status=400
)
return JsonResponse(
{"email": email},
status=200
)
# some error occurred
return JsonResponse({"error": ""}, status=400)对于javascript使用的任何视图，重要的一点是返回一个JsonResponse。
所以如果我是你，我会为ajax设置一个新的视图，这会让你现有的视图变得非常简单；
def agent1_ajax(request):
agent_data = Agent1.objects.all()
agent_details = get_agent_details(agent_data)
return JsonResponse({
"agent_data": agent_data, "agent_details": agent_details
}, status=200)
def agent1(request):
return render(request, 'manager/data.html', {})就加载gif而言，您需要一个包含gif的元素，然后您可以绑定到ajax事件以显示/隐藏；
$(document).ajaxStart(function() {
$("#loading").show();
});
$(document).ajaxStop(function() {
$("#loading").hide();
});https://stackoverflow.com/questions/65731939
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号