使用 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 变量的值显示不同的消息。

   
   
       
           
               
   Contact Me
               
                   If you are interested in me, I would love to hear it.
               
           
           
   
               
                   
                       
                           
                           
                           A name is required.
                       
                       
                           
                           
                           An email is required.
                           Email is not valid.
                       
                       
                           
                           
                           A phone number is required.
                       
                   
                       
                           
                               
                               
                               A message is required.
                           
                       
                   
               
               
               
               
               {% if msg_sent %}
                   
                       Form submission successful!
                   
               {% else %}
                   
                   
                   
                   
                   Error sending message!
               {% endif %}
               
               
                   Send Message
               
           
       
   

   关键修改：

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

注意事项

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

总结

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