javascript - How can I show a loading animation in Django while the server is processing a view? - Stack Overflow

admin管理员组

文章数量:1400844

So I'm currently working on a Django project that has a view that takes quite a bit of time to load and it can be rather user unfriendly to keep the user wondering what's wrong with the website until the page loads.

My website works in way such that the user would have a url such as:

Saved to their bookmarks. Upon visiting the above URL the server should display a loading message (probably with a GIF and AJAX or JS) of a loading screen until the server finishes loading data and then display it.

Note: Just in case it matters, when he user goes to the above mentioned link, they won't be redirected there, rather, this would be their entry point since it's a url that they have saved in their bookmarks

What I thought would work is returning some sort of a loading template of sorts as soon as somebody visits the page, and then after the data processing has finished, I would return the final response. But I can't have two returns in a function.

The following is my urls.py file:

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'),
]

And the following is my views.py file

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})

How could I add a loading screen of sorts between user using visiting the URL and the data processing finishing?

So I'm currently working on a Django project that has a view that takes quite a bit of time to load and it can be rather user unfriendly to keep the user wondering what's wrong with the website until the page loads.

My website works in way such that the user would have a url such as:

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

Saved to their bookmarks. Upon visiting the above URL the server should display a loading message (probably with a GIF and AJAX or JS) of a loading screen until the server finishes loading data and then display it.

Note: Just in case it matters, when he user goes to the above mentioned link, they won't be redirected there, rather, this would be their entry point since it's a url that they have saved in their bookmarks

What I thought would work is returning some sort of a loading template of sorts as soon as somebody visits the page, and then after the data processing has finished, I would return the final response. But I can't have two returns in a function.

The following is my urls.py file:

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'),
]

And the following is my views.py file

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})

How could I add a loading screen of sorts between user using visiting the URL and the data processing finishing?

• javascript
• python
• django
• web
• frameworks

Share Improve this question Follow edited Dec 28, 2019 at 12:03 Ryan Marks asked Dec 28, 2019 at 11:45 Ryan MarksRyan Marks 11811 gold badge33 silver badges88 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

What I would suggest is putting the loading template (the GIF or whatever) in your default template for the page. And then, when the Ajax call has returend successfully, hide or remove the loading GIF using javascript.

I do not think it is necessary to send the loading template using Ajax, if I understand your scenario correctly.

EDIT

You cannot send two consecutive responses from one view. In your view the reponse cannot be send before the User data is processed.

So I think your flow should look like this:

1. Open the loading template without the user data

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

2. When loaded your page should send a AJAX request (receiving html data) to a second view, e.g.:

    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)

3. On successful return of the AJAX call remove the GIF and add the returned data using javaScript

Here is an example of a very stripped down possible template with the script, just to make the answer clearer

<head>
    <!-- Don't forget to load jQuery -->
    <script src="https://ajax.googleapis./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>

本文标签： javascriptHow can I show a loading animation in Django while the server is processing a viewStack Overflow