
本文介绍如何使用 Flask 框架在 HTML 表单提交后向用户显示成功或失败的消息。我们将利用 Flask 的模板引擎和条件语句,根据表单提交的结果动态地在页面上呈现相应的消息,无需编写额外的 JavaScript 代码。
实现步骤
修改 Flask 路由函数: 在 Flask 路由函数中,根据表单处理的结果设置一个变量,用于传递给 HTML 模板。例如,如果邮件发送成功,则设置 msg_sent=True,否则设置 msg_sent=False。
from flask import Flask, render_template, requestimport smtplibMY_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 MessagennName: {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 Me
If you are interested in me, I would love to hear it.{% if msg_sent %}A name is required.An email is required.Email is not valid.A phone number is required.A message is required.{% else %}Form submission successful!Error sending message!{% endif %}
关键修改:
移除了原有的 d-none 类的 div 元素,因为我们不再需要 JavaScript 来控制它们的显示。添加了 {% if msg_sent %} 和 {% else %} 块,根据 msg_sent 的值显示不同的消息。 可以根据需要自定义成功和失败消息的内容和样式。
注意事项
确保已正确安装 Flask 和 smtplib 库。替换 MY_EMAIL 和 MY_PASSWORD 为你自己的邮箱地址和密码。建议使用环境变量来存储敏感信息,如邮箱密码,而不是直接硬编码在代码中。此示例仅用于演示目的,实际应用中可能需要更完善的错误处理和安全措施。可以根据需要自定义成功和失败消息的样式和内容。
总结
通过以上步骤,我们成功地使用 Flask 和 Jinja2 模板引擎实现了在 HTML 表单提交后显示成功/失败消息的功能,而无需编写额外的 JavaScript 代码。这种方法简单易懂,易于维护,适用于大多数 Web 应用场景。 记住,良好的用户体验至关重要,清晰明确的反馈消息能有效提升用户满意度。
以上就是使用 Flask 在 HTML 表单提交后显示成功/失败消息的详细内容,更多请关注创想鸟其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1597494.html
微信扫一扫
支付宝扫一扫