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

Question

我有一个 Flask 应用程序，我想在提交时更新按钮文本。该函数使用 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)

Answer 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..。

Answer 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;
}

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

Update Button text on submit for long loading time

python

flask

flask-wtforms