如何在 html 中提交表单后显示成功消息

Question

这是我使用 bootstrap/python/html 的代码，如果您需要，我没有发布 css 部分，我将发布这部分。 我可以使用 smtplib 和 flask 发送 email，并且我想在表单提交后显示成功和错误消息。 如何编写代码？ 我需要写 JavaScript 还是可以继续使用 flask 来显示消息？

服务器.py

        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"])
        
                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']}"
                    )
        
                return render_template("index.html", msg_sent=True)
            return render_template("index.html", msg_sent=False)
        
        if __name__ == "__main__":
            app.run(debug=True)

index.html contact part

    <!-- 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-->
                        <div class="d-none" id="submitSuccessMessage">
                            <div class="text-center text-white mb-3">
                                <div class="fw-bolder">Form submission successful!</div>
                            </div>
                        </div>
                        <!-- Submit error message-->
                        <!---->
                        <!-- This is what your users will see when there is-->
                        <!-- an error submitting the form-->
                        <div class="d-none" id="submitErrorMessage"><div class="text-center text-danger mb-3">Error sending message!</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>
                </div>
        </section>

Answer 1

您可以使用块来根据条件显示内容。 因此，使用模板中的message_sent变量来显示成功或失败。 块内容可以如下所示。 这可以放在 html 文件中：

{% block content %}
   {% if msg_sent %}
      <div>blah blah blah blah</div>
   {% else %}
      <div>NONONONO</div>
   {% endif %}
{% endblock content %}