本文旨在指导开发者在使用 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 内容。
- 错误处理： 在实际应用中，务必进行完善的错误处理，以便向用户提供更友好的错误提示。
- 安全性： 始终对用户输入进行验证和清理，以防止安全漏洞。
4. 总结
通过结合 Flask 的后端处理和 Jinja2 的前端模板，我们可以轻松地在表单提交后显示成功或失败消息。这种方法简单易懂，适用于各种 Web 应用。记住，良好的错误处理和用户反馈是构建高质量 Web 应用的关键。
