Flask + jQuery：線程完成后渲染不同的模板

Question

我是 Flask 的新手，我需要一些幫助。 我創建了一個 Flask ，用戶在其中上傳文件，然后將對其進行處理。 該過程大約需要 1 到 2 分鍾，但在此處理時間內，我想渲染一個“正在加載”的 HTML，它將被替換為 Results.html 的過程完成。 我想我可以使用 jQuery 來完成這項工作（我的 JS 知識非常有限）。 我引用了這個問題，但由於某種原因，它不起作用。 如果有人可以幫助我，將不勝感激。

python（簡體）：

th = Thread()
finished = False


@app.route("/<jobid>/", methods=["GET"])
def upload_complete(jobid):

    #code I can’t show 

    global th 
    global finished
    finished = False
        
    th = threading.Thread(target=test_thread, args=[6])
    th.start()
    return render_template("loading.html", jobid=jobid)
            
def test_thread(sec):
    global finished 
    print ("starting")
    time.sleep(sec)
    print ("finished")
    finished = True 

@app.route('/result')
def result():
    return 'Done'


@app.route('/status')
def thread_status():
    return jsonify(dict(status=('finished' if finished else 'running')))

加載.html：

{% extends "templates/base.html" %}
{% block script %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        var refresh_id = setInterval(function () {
            $.get(
                "{{ url_for('thread_status') }}",
                function (data) {
                    console.log(data);
                    if (data.status == 'finished') {
                        window.location.replace("{{ url_for('result') }}");
                    }
                }
            )
        }
            , 1000);
    });
</script>
{% endblock %}
{% block title %}
succesfull upload
{% endblock %}
{% block main %}
<h1>loading</h1>
{% endblock %}

線程工作正常，加載 HTML 僅呈現線程完成后不顯示結果頁面。 我不知道這在哪里很重要，但我的終端中的結果如下：

127.0.0.1 - - [16/Dec/2020 14:53:08] "POST /upload/ HTTP/1.1" 302 -
starting
127.0.0.1 - - [16/Dec/2020 14:53:08] "GET /55953bfc-0795-4b4d-8d7b-a38afd2edbd5/ HTTP/1.1" 200 -
127.0.0.1 - - [16/Dec/2020 14:53:08] "GET /favicon.ico/ HTTP/1.1" 200 -
finished

Answer 1

當您創建一個新線程時，您正在使用不同的進程，並且它們之間的通信總是有點棘手。

如果您的線程仍在運行，您可以使用返回True的方法.is_alive() 。

@app.route('/status')
def thread_status():
    global th

    return jsonify(dict(status=('running' if th.is_alive() else 'finished')))

如果即使計算完成后is_alive()仍然返回True ，您可以在Thread腳本的末尾添加sys.exit(0) （當然還有import sys語句），以確保進程在完成所有操作后終止已經完成了。

但是，多次從您的服務器請求信息不是執行性的，如果多個客戶端需要一些實時信息，您可以輕松地關閉您的服務器。 如果您需要向您的用戶提供實時信息，您應該研究一下 WebSockets。 這個答案可能會有所幫助。

Answer 2

我正在使用引導程序並導入了 jQuery 的苗條版本... AJAX 以這種方式失去了它的功能：

在<main></main>之后修復我的基本模板：

<!-- jQuery, Popper.js, and Bootstrap JS -->
<!--script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script-->
<!--bootstraps jQuery version causes issues with AJAX functionality so import another version of jQuery-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>