提交时更新按钮文本以延长加载时间答案

【问题标题】：Update Button text on submit for long loading time提交时更新按钮文本以延长加载时间
【发布时间】：2019-04-19 15:33:33
【问题描述】：

我有一个烧瓶应用程序，我想在提交时更新按钮文本。该函数正在使用 openssl 生成密钥和 csr，因此需要一些时间。我希望在单击提交按钮后发出某种消息，提醒用户正在处理它。但是，我的函数在生成 csr/key 后呈现页面的方式。需要一些帮助。

我尝试在提交时更新 label.text，但在生成 csr/key 之前它不会呈现它。

@app.route('/submit_csr', methods=['GET', 'POST'])
def submit_csr():
    form = RequestCSRForm()
        if form.validate_on_submit():
            form.submit.label.text = 'Generating...'
            os.system("openssl req -out {0}/{1}/{1}.csr -new -newkey rsa:4096 -nodes -keyout {0}/{1}/{1}.key -subj {2} > /dev/null 2>&1".format(...)
            return render_template("csr.html", content=content, message="Please copy your CSR below for: ", value=form.common_name.data)
    return render_template('index.html', title='Request CSR', form=form)

【问题讨论】：

标签： python flask flask-wtforms

【解决方案1】：

您可以在提交表单时使用 JavaScript 更改按钮文本。

例子

index.html

<form action="/" method="post">
<input id="mybutton" value="submit" name="submit1" type="submit" onclick="return showloading();">
</form>
<script>
function showloading() {
  var button= document.getElementById('mybutton');
  button.value = 'loading..';
}
</script>

app.py

from flask import Flask,request,render_template
import time
app = Flask(__name__)
app.secret_key = b'yoursecret key/'

@app.route('/',methods=['GET','POST'])
def index():
    if request.method == 'POST' and 'submit1' in request.form:
        time.sleep(10)
        return "Done"
    return render_template('index.html')

当提交按钮被按下时，它会调用showloading 函数将按钮值更改为loading..。

【讨论】：

【解决方案2】：

您可以在函数执行时显示加载图标。您可以通过https://icons8.com/preloaders/ 获得免费的 GIF 预加载器。

JavaScript：

<script type="text/javascript">
    function loading(){
        document.getElementById('container').style.display = 'none';
        document.getElementById('loading').style.display = 'block';     
    }
</script>

HTML：

<div id="loading"></div>
<div id="container">
    <form action="/submit_csr" method="POST">
        <input type="text" name="data" placeholder="">
        <input type="submit" value="submit" onclick="loading();">
    </form>
</div>

CSS：

#loading{
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 45px;
    height: 45px;
    background: url(/static/img/loading.gif) no-repeat center;
    background-size: cover;
}

【讨论】：