使用 Flask 在 HTML 表单提交后显示成功/失败消息

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

使用 Flask 在 HTML 表单提交后显示成功/失败消息

2025-11-21

浏览次数：次

返回列表

使用 flask 在 html 表单提交后显示成功/失败消息

本文介绍如何使用 Flask 框架在 HTML 表单提交后向用户显示成功或失败的消息。我们将利用 Flask 的模板引擎和条件语句，根据表单提交的结果动态地在页面上呈现相应的消息，无需编写额外的 J*aScript 代码。

实现步骤

修改 Flask 路由函数： 在 Flask 路由函数中，根据表单处理的结果设置一个变量，用于传递给 HTML 模板。例如，如果邮件发送成功，则设置 msg_sent=True，否则设置 msg_sent=False。

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():
    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']}"
                )
            msg_sent = True  # 邮件发送成功
        except Exception as e:
            print(f"邮件发送失败: {e}")
            msg_sent = False # 邮件发送失败

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

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

关键修改：

添加了 try...except 块来捕获邮件发送过程中的异常。
根据邮件发送是否成功，设置 msg_sent 变量的值。

修改 HTML 模板： 在 HTML 模板中使用 Jinja2 模板引擎的条件语句 ({% if ... %})，根据 msg_sent 变量的值显示不同的消息。

佳蓝在线销售系统(创业版) 佳蓝在线销售

1、对ASP内核代码进行DLL封装，从而大大提高了用户的访问速度和安全性；2、采用后台生成HTML网页的格式，使程序访问速度得到进一步的提升；3、用户可发展下级会员并在下级购买商品时获得差额利润；4、全新模板选择功能；5、后台增加磁盘绑定功能；6、后台增加库存查询功能；7、后台增加财务统计功能；8、后台面值类型批量设定；9、后台财务曲线报表显示；10、完善订单功能；11、对所有传输的字符串进行安全

0 查看详情佳蓝在线销售系统(创业版) 佳蓝在线销售

<!-- 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 success message-->
            <!---->
            <!-- This is what your users will see when the form-->
            <!-- has successfully submitted-->
            {% if msg_sent %}
                <div class="text-center text-white mb-3">
                    <div class="fw-bolder">Form submission successful!</div>
                </div>
            {% else %}
                <!-- Submit error message-->
                <!---->
                <!-- This is what your users will see when there is-->
                <!-- an error submitting the form-->
                <div class="text-center text-danger mb-3">Error sending message!</div>
            {% endif %}
            <!-- Submit Button-->
            <div class="text-center">
                <button class="btn btn-primary btn-xl text-uppercase" id="submitButton" type="submit">Send Message</button>
            </div>
        </form>
    </div>
</section>