更新按钮文本提交长时间加载时间

Question

我有一个烧瓶申请，我想更新提交按钮文本。该函数使用openssl生成密钥&csr，因此需要一些时间。我想有一个某种消息，提醒用户，它正在处理后，提交按钮被点击。但是，我的函数在csr/键生成后呈现页面的方式是。我需要一些帮助。你知道吗

我试着更新标签.text在提交时，但在生成csr/键之前，它不会再次呈现它。你知道吗

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

Answer 1

可以在函数执行时显示加载图标。 您可以在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;
}

Answer 2

提交表单时，可以使用JavaScript更改按钮文本。你知道吗

示例

索引.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>

应用程序类型

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

当按下submit按钮时，它调用showloading函数，该函数将按钮值更改为loading..。你知道吗