images files python html flask loading

python - files - Muestra un mensaje de ''carga'' mientras se ejecuta una función que consume tiempo en Flask



load file in flask (2)

Todavía soy relativamente nuevo en Flask, y un poco novato en la web en general, pero hasta ahora he tenido buenos resultados. En este momento tengo un formulario en el que los usuarios ingresan una consulta, que se asigna a una función que puede tardar entre 5 y 30 segundos para devolver un resultado (buscar datos con la API de Freebase).

El problema es que no puedo dejar que el usuario sepa que su consulta se está cargando durante este tiempo, ya que la página de resultados solo se carga una vez que la función finaliza su trabajo. ¿Hay alguna manera de que pueda mostrar un mensaje de carga mientras está pasando? Encontré un Javascript que podría mostrar un mensaje de carga mientras los elementos de la página todavía se están cargando, pero mi período de espera ocurre antes de ''render_template''.

Reuní un código de ejemplo, solo para demostrar mi situación:

Pitón:

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

Extracto 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>

Extracto de done.html:

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

Cualquier ayuda sería muy apreciada, espero que este ejemplo ayude.

Agregue esto a su archivo index.html o js (supongo que tiene jQuery aquí, puede usar javascript estándar, por supuesto):

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

Agregue esto a su archivo html o css:

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

Puede obtener un GIF adecuado de http://www.ajaxload.info/ . Descárguelo y póngalo en su carpeta estática.

A continuación, cambie su botón de envío para llamar a la función js anterior:

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

y agregue una carga y un div de contenido a su archivo html 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>

Ahora cuando haces clic en ''Enviar'', la función js debe ocultar tu contenido y mostrar un GIF cargado. Esto se mostrará hasta que se procesen sus datos y el matraz cargue la nueva página.