javascript - 在服务器处理 View 时，如何在 Django 中显示加载动画？-6ren

javascript - 在服务器处理 View 时，如何在 Django 中显示加载动画？

转载作者：行者123 更新时间：2023-12-04 10:50:24

24

4

所以我目前正在处理一个 Django 项目，该项目的 View 需要花费相当多的时间来加载，并且在页面加载之前让用户想知道网站有什么问题可能对用户不友好。

我的网站以这样的方式工作，即用户将拥有一个网址，例如:

http://www.example.com/Name/JohnRichards

保存到他们的书签。在访问上述 URL 时，服务器应显示加载屏幕的加载消息(可能带有 GIF 和 AJAX 或 JS)，直到服务器完成加载数据然后显示它。

注:以防万一，当他的用户转到上述链接时，他们不会被重定向到那里，相反，这将是他们的入口点，因为这是他们保存在书签中的网址

我认为可行的是在有人访问页面时立即返回某种加载模板，然后在数据处理完成后，我将返回最终响应。但是我不能在一个函数中有两个返回值。

以下是我的 urls.py 文件:

from django.contrib import admin
from django.urls import path
from myapp import views

urlpatterns = [
    path('', views.index, name='index'),
    path('Name/'+'<str:Name>', views.NameInLink, name='NameInLink'),
]

以下是我的 views.py 文件

from django.shortcuts import render
from django.http import HttpResponse
from django.http import HttpResponseRedirect
from .forms import NameForm
from . import DataProcessor
import time

def NameInLink(request, Name):
    UserData = DataProcessor.process(Name)
    return render(request, "UserData.html", {"UserData": UserData})

如何在用户使用访问 URL 和数据处理完成之间添加各种加载屏幕？

最佳答案

我的建议是将加载模板(GIF 或其他)放在页面的默认模板中。然后，当 Ajax 调用成功返回时，使用 javascript 隐藏或删除加载 GIF。

如果我正确理解您的场景，我认为没有必要使用 Ajax 发送加载模板。

编辑

您不能从一个 View 发送两个连续的响应。在您看来，在处理用户数据之前无法发送响应。

所以我认为你的流程应该是这样的:

打开没有用户数据的加载模板

def NameInLink(request, Name):
    return render(request, "UserData.html")

加载后，您的页面应向第二个 View 发送 AJAX 请求(接收 html 数据)，例如:

    def process_data(request, name):
        userData = DataProcessor.process(name)
        context = {'data': userData}
        result = render_to_string("some_results_template", context)
        data = {'data': result}
        return JsonReponse(data)

成功返回 AJAX 调用后，删除 GIF 并使用 javaScript

添加返回的数据

这是一个带有脚本的非常精简的可能模板的示例，只是为了使答案更清晰

<head>
    <!-- Don't forget to load jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head> 

<body>
<h1>Default Page</h1> 

<!-- The loading image -->
<div id="loading">
    <p>Loading</p>
</div>

<!-- Container for result -->
<div id="success">

</div>

<script>

    // Function for adding User data and removing loading animation
    var replace_data = function(data){
        $('#success').append(data.data);
        $('#loading').remove();
    }

    // AJAX call when page has loaded
    $(document).ready(function(){
        $.ajax({
            url: '/test2/',
            data: {
                'name': 'FOO'
            },
            data_type: 'html',
            success: function(data){
                replace_data(data);
            }
        });
    });

</script>
</body>

关于javascript - 在服务器处理 View 时，如何在 Django 中显示加载动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59510573/

24

4

0

文章推荐： Git 流程和功能分支的同步

文章推荐： r - 使用 read.csv，空字段将 NA 添加到 data.frame

文章推荐： ionic-framework - Ionic 是更快的 ng-click 或 on-tap

文章推荐： python - 无法激活现有的 conda 环境

django - 在 Django+Django REST 中创建具有外键关系的嵌套资源
我对 Python-Django 和 web 开发还很陌生，我被困在这个使用 POST 创建新资源的特殊问题上。我正在为 REST API 使用 Django REST 框架，我正在尝试创建一个新资
django - 如何下载使用 Django 存储上传的 Django 媒体文件？
我已经使用 Django-storages 成功地将 Word 文档存储到 S3。 class Document(TitleSlugDescriptionModel, TimeStampedModel
django - 如何在给定 Django 模型对象或查询集的情况下使用 Django 代理模型
我有 2 个关于模型代理的问题，如何从模型对象创建代理对象？如何从模型查询集创建代理查询集？例如，假设我们定义了: from django.contrib.auth.models import
django - 从 Django 测试访问 Django 测试服务器
我想编写一个直接执行 HTTP 请求的单元测试(而不是使用 django.test.client.Client)。如果您好奇为什么 - 那是因为我想测试我从 Django 应用程序公开的 Thrif
django - 如何开始构建 django 网站以及 django 如何构建页面？
我为我的个人网站启动了一个 django 项目来学习 django。到目前为止，我已经将我的开发环境设置为我需要的一切，并遵循 this很棒的教程来创建一些基本的数据结构和模板。现在我想开始使用我之前
django - Python/Django django-registration 添加一个额外的字段
我已经阅读了很多关于如何在使用 Django 注册时添加额外字段的信息，例如 here 、 here 和 here 。代码片段是: forms.py(来自注册应用程序) class Registrat
django - Django:如何从每个 View 写入当前用户名(django)
我正在编写小型社交应用程序。功能之一是在网站标题中写入用户名。因此，例如，如果我登录并且我的名字是Oleg(用户名)，那么我应该看到: Hello, Oleg | Click to edit prof
django - 如何将 django-reversion 添加到使用 django 和 django-rest 框架开发的应用程序中
我有一个使用 Django 和 Django Rest 框架开发的应用程序。我想将 django-reversion 功能添加到我的应用程序中。我已经尝试过http://django-reversi
django - 可以在没有 Django 表单的情况下呈现 Django 表单字段吗？
我有一个简单的 HTML 表单，我没有使用 Django 表单，但现在我想添加一个选择。选择最容易创建为 Django ChoiceField (与通过循环等手动创建选择相反)，但是，如果没有在 D
django - 字符串中的 Django 外键和不带字符串的 Django 外键有什么区别？
我不明白为什么人们以两种方式编写外键，这样做的目的是什么？它们是相同还是不同？我注意到有些人这样写: author = models.ForeignKey(Author, on_delete=mod
django - 使用 Django 评论获取 Django 中评论最多的帖子
我想在我的 Django 应用程序中获取评论最多的十个帖子，但我做不到，因为我想不出合适的方法。我目前正在使用 django 评论框架，并且我已经看到使用 aggregate or annotate
django - Django 管理中日期字段的自定义过滤器，Django 1.2
这对于 Django 1.2 仍然有效吗？ Custom Filter in Django Admin on Django 1.3 or below 我已经尝试过，但管理类中的 list_filter
django - 在 Django 中使用模板变量和 django-compressor
问题在于，当 django-compressor 编译为 .js 文件的 CoffeeScript 文件中引用 {{ STATIC_URL }} 时，它无法正确加载。在我的 django 模板中，我
django - 在事件应用程序上将数据从一个 django 模型移动到另一个(django+south)
我正在尝试将一些字段从一个 django 模型移动到一个新模型。假设我有一个书籍模型: class Book(models.Model): title = models.CharField(max
django - 使用 Django 评论获取 Django 中评论最多的帖子
我想在我的 Django 应用程序中获取评论最多的十个帖子，但我做不到，因为我想不出合适的方法。我目前正在使用 django 评论框架，并且我已经看到使用 aggregate or annotate
django - 比较 django 权限并使用 django 规则
目前我正在寻找在 Django 中实现访问控制。我已经阅读了有关内置权限的内容，但它并不关心每个对象的基础。例如，我想要“只有创建者可以删除自己的项目”之类的权限。所以我读到了 django-guar
django - 如何将 Django 模型的一个字段的值设置为等于其他 Django 模型的其他字段
嗨，我正在将我的 Django 模型的一个字段的值设置为其他模型的另一个字段的值。这个值应该是动态变化的。这是我的第一个模型 class MainModel(AbstractBaseUser, Pe
django - 来自模型的初始表单数据 - Django
我正在尝试为我的模型创建一个编辑表单。我没有使用模型表单，因为根据模型类型，用户可以使用不同的表单。 (例如，其中一个表单有 Tinymce 小部件，而另一个没有。) 有没有什么方法可以使用模型设置表
django - Django 模板中的搜索字段
Django 模板中的搜索字段如何在类似于此图像的 Django 模板中创建搜索字段 http://asciicasts.com/system/photos/1204/original/E354I0
django - Django 如何知道用户是谁？
根据 Django documentation ，如果 Django 安装激活了 AuthenticationMiddleware，HttpRequest 对象有一个“user”属性代表当前登录的用户

首页

博学

6Ren·AI

商城

javascript - 在服务器处理 View 时，如何在 Django 中显示加载动画？