Flask - 在等待任务完成时使用javascript显示加载页面[重复]

Question

在menu.html 中，单击给定链接会以这种方式呈现所选页面pasta.html：

    <ul>
      <li><a href="{{ url_for('pasta') }}";>Pasta</a>
            <form action="{{ url_for('handle_menu') }}" method="post">
            <input type="radio" name="additive" value="Cheese"> <label style="font-size: 11px;">Cheese</label>
            </form>
      </li> 

但是假设@app.route('/pasta') 必须在“完成”之前“烹饪”一些“配料”：

 @app.route('/pasta')
 def pasta():

     # (perform some long task here)

     return render_template('pasta.html')

就此而言，我想在页面加载时显示/cooking 视图，如下所示：

@app.route('/cooking')
def cooking():
    return render_template('cooking.html')

---

如果我没记错的话，使用 Flask 和 jinja2 模板，您可以返回 (200) 或重定向 (301) 页面，对于像 loading.html 这样的任何中间页面，您需要 @ 987654333@.

---

那么，我如何在此处使用javascript 以显示cooking.html 页面同时 等待/pasta 任务完成，并且一旦任务完成，终于退货了？

Answer 1

由于您使用的是 GET 请求，因此您可以将锚标记路由到 cooking，渲染 cooking.html 模板，然后使用 window.location.replace() 重定向到 pasta。 pasta() 中的长任务将在 pasta.html 渲染之前执行。

在menu.html:

<a href="{{ url_for('cooking') }}">Pasta</a>

在cooking.html:

<script> window.location.replace('/pasta'); </script>

---

对于 POST 请求，您需要将表单值发送到 cooking，将它们传递给模板，然后使用 AJAX 再次将它们发送到 pasta，最后在回调函数中重定向。

在menu.html:

<form action="{{ url_for('cooking') }}" method='POST'>

在cooking():

@app.route('/cooking')
def cooking():
    return render_template('cooking.html', form_data=request.form['form_data'])

在pasta():

@app.route('/pasta', methods=['GET', 'POST'])
def pasta():
    if request.method == 'GET':
        render_template('pasta.html')

    # (perform some long task here)

    return make_response('POST request successful', 200)

在cooking.html:

<script>
    $.ajax({
        type: 'POST',
        url: '/pasta',
        data: {
            form_data: '{{form_data}}',
        },
        success: function() {
            window.location.replace('/pasta');
        }
      });
</script>

Answer 2

您需要创建名为 cooking_request 的第三个端点：

1. /cooking_request
2. /cooking
3. /pasta

渲染/cooking_request 页面并在其中使用javascript 以使用Ajax 调用/cooking 页面。当/cooking 响应时，您将请求/pasta 内容并显示给用户。

这是您可以在/cooking_request 页面中使用的示例代码。它将调用/cooking 页面，等待它，最后在 div#pasta-results 元素中呈现/pasta。

<div id="pasta-results">Please wait, loading...</div>

<script type="text-javascript">
    function loadPasta() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          document.getElementById("pasta-results").innerHTML = this.responseText;
        }
      };
      xhttp.open("GET", "http://website-host/pasta", true);
      xhttp.send();
    }

    function loadCooking() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          loadPasta();
        }
      };
      xhttp.open("GET", "http://website-host/cooking", true);
      xhttp.send();
    }

    loadCooking();
<script>