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

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

实现步骤

1. 修改 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 变量的值。

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

   

   DeepBrain

   AI视频生成工具，ChatGPT +生成式视频AI =你可以制作伟大的视频!

   94

   查看详情

   立即学习“前端免费学习笔记（深入）”；

   <!-- 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>

   登录后复制

   关键修改：

   • 移除了原有的 d-none 类的 div 元素，因为我们不再需要 JavaScript 来控制它们的显示。
   • 添加了 {% if msg_sent %} 和 {% else %} 块，根据 msg_sent 的值显示不同的消息。 可以根据需要自定义成功和失败消息的内容和样式。

注意事项

• 确保已正确安装 Flask 和 smtplib 库。
• 替换 MY_EMAIL 和 MY_PASSWORD 为你自己的邮箱地址和密码。
• 建议使用环境变量来存储敏感信息，如邮箱密码，而不是直接硬编码在代码中。
• 此示例仅用于演示目的，实际应用中可能需要更完善的错误处理和安全措施。
• 可以根据需要自定义成功和失败消息的样式和内容。

总结

通过以上步骤，我们成功地使用 Flask 和 Jinja2 模板引擎实现了在 HTML 表单提交后显示成功/失败消息的功能，而无需编写额外的 JavaScript 代码。这种方法简单易懂，易于维护，适用于大多数 Web 应用场景。 记住，良好的用户体验至关重要，清晰明确的反馈消息能有效提升用户满意度。

以上就是使用 Flask 在 HTML 表单提交后显示成功/失败消息的详细内容，更多请关注php中文网其它相关文章！