本文介绍如何使用 Flask 框架在 HTML 表单提交后向用户显示成功或失败的消息。我们将利用 Flask 的模板引擎和条件语句，根据表单提交的结果动态地在页面上呈现相应的消息，无需编写额外的 JavaScript 代码。
实现步骤
-
修改 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 变量的值显示不同的消息。
立即学习“前端免费学习笔记（深入）”；
<!-- 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 应用场景。 记住，良好的用户体验至关重要，清晰明确的反馈消息能有效提升用户满意度。
