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

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

本文介绍如何使用 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.
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 %}

关键修改:

移除了原有的 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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月23日 12:05:58
下一篇 2025年12月23日 12:06:14

相关推荐

发表回复

登录后才能评论
关注微信