如何在帶有燒瓶的表單按鈕旁邊顯示 html 文本

Question

我想在注冊表的“提交”按鈕旁邊顯示一個確認注冊成功的小文本。 但是，它會在另一個頁面上返回我的 html 文本。 我希望它顯示在同一頁面上，在“按鈕”旁邊的“表單”內。 我怎么做。 我正在使用python燒瓶。 這是我的代碼：

from flask import Flask, render_template, request
from flask_mysqldb import MySQL

app = Flask(__name__)
app.config['DEBUG'] = True

app.config['MYSQL_HOST'] = 'localhost'
app.config['MYSQL_USER'] = 'root'
app.config['MYSQL_PASSWORD'] = '104041122'
app.config['MYSQL_DB'] = 'PAGINA10'

mysql = MySQL(app)

@app.route('/', methods=['GET', 'POST'])
def form():
    if request.method == 'POST':
        digitado = request.form

        nome = digitado['nome']
        cpf = digitado['cpf']
        email = digitado['email']
        birth = digitado['birth']

        cursor = mysql.connection.cursor()
        cursor.execute("CREATE TABLE IF NOT EXISTS pagina10 (nome VARCHAR(50) NOT NULL, cpf VARCHAR(11) NOT NULL, email VARCHAR(20) NOT NULL, birth DATE NOT NULL)")
        cursor.execute("INSERT INTO pagina10 (nome, cpf, email, birth) VALUES (%s, %s, %s, %s)", (nome, cpf, email, birth))
        mysql.connection.commit()
        cursor.close()
        return '<h1> Dados cadastrados com sucesso </h1>'
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True)

這是我的html頁面：

<form method="POST" action="">
                <div>
                    <i class="fa-solid fa-pen"></i>
                    <input type="text" required name="nome" autofocus placeholder="Nome" data-ls-module="charCounter" maxlength="50" minlength="3"/>
                </div>
                <div>
                    <i class="fa-solid fa-id-card"></i>                    
                    <input type="text" required name="cpf" autofocus placeholder="CPF" minlength="11" maxlength="11"/>               
                </div>
                <div>
                    <i class="fa-solid fa-at"></i>                    
                    <input type="email" required name="email" autofocus placeholder="E-mail" data-ls-module="charCounter" minlength="5"  pattern="[UTF-8]">                
                </div>
                <div>
                    <i class="fa-solid fa-cake-candles"></i> 
                    <input type="date" required name="birth" autofocus placeholder="Nascimento">                
                </div>
                <button type="submit">Cadastrar</button>
            </form>

Answer 1

您可以使用flask的flash包在您的網站上顯示此類消息。
您的 python 代碼可能類似於：

from flask import flash

@app.route('/registrierung', methods=['GET', 'POST'])
@app.route('/Registrierung', methods=['GET', 'POST'])
def registration_page():  # put application's code here

    registration_form = RegistrationForm()
    # ---------------------------------------------------

    if registration_form.validate_on_submit():
        print(registration_form.is_submitted())
        # ----------------- Database Stuff -------------

        flash(f'Account was created!', 'success')
        return redirect(url_for('login_page'))

    return render_template("registrierung.html", img_var_path=get_background_img_path(), registration_form=registration_form)

你必須在你的 html 代碼中使用這樣的東西：

<!-- flash messages here -->

    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            <div class="alert" id="hideMe">
            {% for category, message in messages %}
                <div class=" alert_{{ category }}">
                    {{ message }}
                </div>
            {% endfor %}
            </div>
        {% endif %}
    {% endwith %}