Afficher un message ' chargement’ pendant qu'une fonction de temps est exécutée dans le flacon
je suis encore relativement nouveau à Flask, et un peu d'un noob web en général, mais j'ai eu quelques bons résultats jusqu'à présent. En ce moment, j'ai une forme dans laquelle 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 laisser l'utilisateur savoir que sa requête se charge pendant ce temps, car la page de résultats ne se charge qu'une fois la fonction terminée. Être il y a un moyen d'afficher un message de chargement pendant que c'est en cours? J'ai trouvé du Javascript qui pourrait afficher un message de chargement pendant que les éléments de la page sont encore en cours de chargement, mais ma période d'attente se produit avant ‘render_template’.
j'ai assemblé quelques exemples 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 l'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 fait.html:
<body>
<h3>Results:</h3>
<p>
{{ display }}
</p>
</body>
Toute aide serait grandement apprécié, j'espère que cet exemple permet.
2 réponses
Cela peut être fait en utilisant un div qui contient une image' chargement gif'. Lorsque le bouton Soumettre est cliqué, le div est affiché en utilisant javascript.
Pour mettre en œuvre ceci, vous pouvez jeter un coup d'oeil à ce site web: http://www.netavatar.co.in/2011/05/31/how-to-show-a-loading-gif-image-while-a-page-loads-using-javascript-and-css/
ajoutez ceci à votre index.html ou fichier js (je suppose que vous avez jQuery ici, vous pouvez utiliser javascript standard bien sûr.):
<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 de http://www.ajaxload.info/. Téléchargez et mettez-le dans votre dossier statique.
puis changez votre bouton de soumission pour appeler la fonction JS ci-dessus:
<input type="submit" name="anything_submit" value="Submit" onclick="loading();">
et Ajouter un chargement et une div de contenu à votre base fichier html:
<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 'Submit', 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 que flask charge la nouvelle page.