Отображать "загружаемое сообщение, когда функция времени выполняется в Flask

Я все еще относительно новичок в Flask и немного веб-нооб в целом, но у меня были хорошие результаты. Сейчас я получил форму, в которой пользователи вводят запрос, который присваивается функции, которая может занять от 5 до 30 секунд, чтобы вернуть результат (поиск данных с помощью API Freebase).

Проблема заключается в том, что я не могу сообщить пользователю, что их запрос загружается в течение этого времени, поскольку страница результатов загружается только после завершения функции. Есть ли способ показать сообщение загрузки во время этого? Я нашел некоторый Javascript, который мог отображать сообщение загрузки, пока элементы страницы все еще загружаются, но мой период ожидания происходит до 'render_template.

Я сбил несколько примеров кода, чтобы продемонстрировать свою ситуацию:

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

Выдержка из 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>

Выдержка из done.html:

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

Любая помощь будет принята с благодарностью, я надеюсь, что этот пример поможет.

Ответ 1

Это можно сделать, используя div, который содержит изображение загрузки gif. Когда нажата кнопка отправки, div отображается с помощью javascript. Чтобы реализовать это, вы можете взглянуть на этот сайт: http://www.netavatar.co.in/2011/05/31/how-to-show-a-loading-gif-image-while-a-page-loads-using-javascript-and-css/

Ответ 2

Добавьте это в свой файл index.html или js (я предполагаю, что у вас есть jQuery здесь, вы можете использовать стандартный javascript, конечно.):

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

Добавьте к этому файл html или css:

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

Вы можете получить адекватный GIF из http://www.ajaxload.info/. Загрузите и поместите его в свою статическую папку.

Затем измените кнопку отправки для вызова функции js:

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

и добавьте в файл загрузки и содержимое div базовый файл 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>

Теперь, когда вы нажимаете "Отправить", функция js должна скрывать ваш контент и отображать загружаемый GIF. Это будет отображаться до тех пор, пока ваши данные не будут обработаны, а флажок загрузит новую страницу.