在 Flask 中执行耗时功能时显示“正在加载”图像 [重复]答案

【问题标题】：Display a ‘loading’ image while a time consuming function is executed in Flask [duplicate]在 Flask 中执行耗时功能时显示“正在加载”图像 [重复]
【发布时间】：2017-01-01 14:49:06
【问题描述】：

我在 Flask 中有一个如下所示的应用：

app = Flask(__name__)

@app.route('/')
def start():
    return render_template('page1.html')  # loads the start page on the beginning

@app.route('/page2',methods=['GET','POST'])
def read():
    if request.method == 'POST':
        # lots of actions taking a long time
        return render_template('page2.html', arg1=arg1, arg2=arg2)

我想在我的 HTML 页面上添加一张照片，该照片将显示“正在加载”，直到 page2 上传。这类似于我当前在 page1 上的 HTML：

<html>
<head>
    <meta charset="UTF-8">
    <title>IP / ISP Research</title>
    <link rel="stylesheet"
      type="text/css"
      href="/static/style.css"/>
</head>

<body>
    <center>
    <h2>Search for something</h2>
<form class="form-style-7" action="/page2" method="POST" >
    <ul>
    <li>
        <label for="arg1">IP</label>
        <input type="text" name="arg1" value="{{arg1}}" maxlength="100">
        <span>Enter arg1</span>
    </li>
    <li>
        <label for="arg2">ISP</label>
        <input type="text" name="arg2" value="{{arg2}}" maxlength="100">
        <span>Enter arg2</span>
    </li>
    <li>
        <input class="go_button" type="submit" value="GO" >
    </li>
    </ul>
</form>    
</center>
</body>
</html>

我尝试过的事情：

主要在我的 HTML 中编写 javascript，例如 here。

还尝试为 showImage() 添加一个函数并将其添加到 HTML 表单标签：onclick="showImage()

还尝试将其添加到 HTML 按钮标签：onSubmit="return showImage()

【问题讨论】：

标签： javascript jquery python html flask

【解决方案1】：

以 jQuery 为例：

<html>
<head>
    <meta charset="UTF-8">
    <title>IP / ISP Research</title>
    <link rel="stylesheet"
      type="text/css"
      href="/static/style.css"/>
    <script src="//code.jquery.com/jquery-3.1.0.min.js"
</head>

<body>
    <center>
    <h2>Search for something</h2>
<form class="form-style-7" action="/page2" method="POST" >
    <ul>
    <li>
        <label for="arg1">IP</label>
        <input type="text" name="arg1" value="{{arg1}}" maxlength="100">
        <span>Enter arg1</span>
    </li>
    <li>
        <label for="arg2">ISP</label>
        <input type="text" name="arg2" value="{{arg2}}" maxlength="100">
        <span>Enter arg2</span>
    </li>
    <li>
        <input class="go_button" type="submit" value="GO" >
    </li>
    </ul>
</form>    
<script>
    $( ".go_button" ).submit(function( event ) {
        # function showing loading progress bar
    });
</script>
</center>
</body>
</html>

【讨论】：

谢谢，我不熟悉 javascript 或 jQuery，你能帮我写完整的函数吗？我要把它放在我的 HTML 中吗？