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

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

2 个答案: