Flask 表单提交后显示成功或失败消息的完整教程-html教程-PHP中文网

Flask 表单提交后显示成功或失败消息的完整教程

花韻仙語

发布： 2025-11-20 12:26:01

原创

809人浏览过

flask 表单提交后显示成功或失败消息的完整教程

本文旨在指导开发者在使用 Flask 框架构建的 Web 应用中，如何在表单提交后显示成功或失败消息。通过利用 Flask 的模板引擎和条件语句，我们可以根据表单处理的结果，向用户提供即时的反馈。本文将提供详细的代码示例和步骤，帮助你轻松实现这一功能。

利用 Flask 模板引擎显示消息

在 Flask 应用中，最常用的方法是在后端处理表单提交，并在模板中显示相应的消息。这种方法利用了 Flask 的模板引擎（通常是 Jinja2）的强大功能，允许我们根据变量的值动态地渲染 HTML 内容。

1. 后端 Flask 代码修改

首先，我们需要在 Flask 的路由函数中，根据表单处理的结果设置一个变量，并将该变量传递给模板。

from flask import Flask, render_template, request
import smtplib

MY_EMAIL = "your email"
MY_PASSWORD = "your pw"

app = Flask(__name__)

@app.route('/', methods=["GET", "POST"])
def home():
    success = False  # 初始化 success 变量
    if request.method == "POST":
        data = request.form
        print(data["name"])
        print(data["email"])
        print(data["phone"])
        print(data["message"])

        try:
            with smtplib.SMTP("smtp.gmail.com", port=587) as connection:
                connection.starttls()
                connection.login(user=MY_EMAIL, password=MY_PASSWORD)
                connection.sendmail(
                    from_addr=MY_EMAIL,
                    to_addrs=MY_EMAIL,
                    msg=f"Subject:New Message\n\nName: {data['name']}\nEmail: {data['email']}\nPhone: {data['phone']}\nMessage: {data['message']}"
                )
            success = True  # 邮件发送成功
        except Exception as e:
            print(f"Error sending email: {e}")
            success = False  # 邮件发送失败

        return render_template("index.html", success=success)
    return render_template("index.html", success=False)

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

登录后复制

在这个例子中，我们添加了一个 success 变量，它的值取决于邮件是否成功发送。然后，我们将 success 变量传递给 index.html 模板。

注意: 务必处理异常情况，例如邮件发送失败，并将 success 设置为 False，以便在前端显示错误消息。

千帆大模型平台

面向企业开发者的一站式大模型开发及服务运行平台

查看详情

2. 前端 HTML 代码修改

接下来，我们需要在 HTML 模板中使用 Jinja2 的条件语句来显示成功或失败消息。

<!-- Contact-->
<section class="resume-section" id="contact">
    <div class="container">
        <div class="resume-section-content">
            <h2 class="mb-0">Contact Me</h2>
            <div class="subheading mb-5">
            If you are interested in me, I would love to hear it.
            </div>
        </div>
        <form id="contactForm" action="{{ url_for('home') }}" method="post">
            <!-- 表单内容 -->
            <div class="row align-items-stretch mb-5">
                <div class="col-md-6">
                    <div class="form-group">
                        <!-- Name input-->
                        <input class="form-control" id="name" name="name" type="text" placeholder="Your Name *" data-sb-validations="required" />
                        <div class="invalid-feedback" data-sb-feedback="name:required">A name is required.</div>
                    </div>
                    <div class="form-group">
                        <!-- Email address input-->
                        <input class="form-control" id="email" name="email" type="email" placeholder="Your Email *" data-sb-validations="required,email" />
                        <div class="invalid-feedback" data-sb-feedback="email:required">An email is required.</div>
                        <div class="invalid-feedback" data-sb-feedback="email:email">Email is not valid.</div>
                    </div>
                    <div class="form-group mb-md-0">
                        <!-- Phone number input-->
                        <input class="form-control" id="phone" name="phone" type="tel" placeholder="Your Phone *" data-sb-validations="required" />
                        <div class="invalid-feedback" data-sb-feedback="phone:required">A phone number is required.</div>
                    </div>
                </div>
                    <div class="col-md-6">
                        <div class="form-group form-group-textarea mb-md-0">
                            <!-- Message input-->
                            <textarea class="form-control" id="message" name="message" placeholder="Your Message *" data-sb-validations="required"></textarea>
                            <div class="invalid-feedback" data-sb-feedback="message:required">A message is required.</div>
                        </div>
                    </div>
                </div>

            <!-- Submit Button-->
            <div class="text-center">
                <button class="btn btn-primary btn-xl text-uppercase" id="submitButton" type="submit">Send Message</button>
            </div>
        </form>

        <!-- 显示消息 -->
        {% if success %}
            <div class="alert alert-success" role="alert">
                邮件已成功发送！
            </div>
        {% else %}
            <div class="alert alert-danger" role="alert">
                邮件发送失败，请检查您的网络连接或稍后再试。
            </div>
        {% endif %}
    </div>
</section>

登录后复制

在这个例子中，我们使用了 {% if success %} 和 {% else %} 语句来根据 success 变量的值显示不同的消息。如果 success 为 True，则显示成功消息；否则，显示失败消息。使用了 Bootstrap 的 alert 类来美化消息框。

3. 代码解释和注意事项

success 变量： 这个变量用于指示表单处理是否成功。在 Flask 代码中，根据实际情况设置它的值。
Jinja2 条件语句： {% if ... %}、{% else %} 和 {% endif %} 是 Jinja2 模板引擎的条件语句，用于根据条件动态地渲染 HTML 内容。
错误处理： 在实际应用中，务必进行完善的错误处理，以便向用户提供更友好的错误提示。
安全性： 始终对用户输入进行验证和清理，以防止安全漏洞。