web-dev-qa-db-fra.com

Afficher un message de «chargement» pendant l’exécution d’une fonction longue en Flask

Je suis encore relativement nouveau à Flask, et un peu un noob web en général, mais j'ai eu de bons résultats jusqu'à présent. Pour l'instant, j'ai un formulaire dans lequel les utilisateurs entrent une requête, qui est donnée à une fonction qui peut prendre entre 5 et 30 secondes pour retourner un résultat (recherche de données avec l'API Freebase).

Le problème est que je ne peux pas faire savoir à l'utilisateur que sa requête se charge pendant cette période, car la page de résultats ne se charge qu'une fois la fonction terminée. Existe-t-il un moyen d'afficher un message de chargement pendant que cela se passe? J'ai trouvé du Javascript qui pouvait afficher un message de chargement pendant le chargement des éléments de la page, mais ma période d'attente se produit avant ‘render_template’.

J'ai assemblé un exemple de code, juste pour montrer ma situation:

Python:

from flask import Flask
from flask import request
from flask import render_template
import time

app = Flask(__name__)

def long_load(typeback):
    time.sleep(5) #just simulating the waiting period
    return "You typed: %s" % typeback

@app.route('/')
def home():
    return render_template("index.html")

@app.route('/', methods=['POST'])
def form(display=None):
    query = request.form['anything']
    outcome = long_load(query)
    return render_template("done.html", display=outcome)

if __name__ == '__main__':
    #app.debug = True
    app.run()

Extrait de index.html:

<body>
    <h3>Type anything:</h3>
    <p>
    <form action="." method="POST">
        <input type="text" name="anything" placeholder="Type anything here">
        <input type="submit" name="anything_submit" value="Submit">
    </form>
    </p>    
</body>

Extrait de done.html:

<body>
    <h3>Results:</h3>
    <p>
        {{ display }}
    </p>
</body>

Toute aide serait grandement appréciée, j'espère que cet exemple vous sera utile.

pythonhtmlflaskloading
32
jrmedd

Cela peut être fait en utilisant un div qui contient une image 'loading gif'. Lorsque vous cliquez sur le bouton Soumettre, le div s'affiche en utilisant javascript. Pour mettre en œuvre cela, vous pouvez jeter un oeil à ce site Web: http://web.archive.org/web/20181023063601/http://www.netavatar.co.in/2011/05/31/how -à-montrer-une-image-de-chargement-gif-tandis-qu'une-page-se charge-en-utilisant-javascript-et-css /

12
Arno Moonens

Ajoutez ceci à votre fichier index.html ou js (je suppose que vous avez jQuery ici, vous pouvez bien sûr utiliser du javascript standard.):

<script type="text/javascript">// <![CDATA[
        function loading(){
            $("#loading").show();
            $("#content").hide();       
        }
// ]]></script>

Ajoutez ceci à votre fichier html ou css:

div#loading {
    width: 35px;
    height: 35px;
    display: none;
    background: url(/static/loadingimage.gif) no-repeat;
    cursor: wait;
    }

Vous pouvez obtenir un GIF adéquat sur http://www.ajaxload.info/ . Téléchargez-le et placez-le dans votre dossier statique.

Ensuite, changez votre bouton de soumission pour appeler ci-dessus la fonction js:

<input type="submit" name="anything_submit" value="Submit" onclick="loading();">

et ajoutez un chargement et une div de contenu à votre fichier html de base:

<body>
    <div id="loading"></div>
    <div id="content">
        <h3>Type anything:</h3>
        <p>
        <form action="." method="POST">
            <input type="text" name="anything" placeholder="Type anything here">
            <input type="submit" name="anything_submit" value="Submit" onclick="loading();">
        </form>
        </p>
    </div>    
</body>

Maintenant, lorsque vous cliquez sur "Soumettre", la fonction js devrait masquer votre contenu et afficher un GIF de chargement. Cela s'affichera jusqu'à ce que vos données soient traitées et flask charge la nouvelle page.

27
jka.ne