时间戳

首页 > 解决方案 > 我想在底部的索引页面本身的烧瓶中处理联系表格

flask - 我想在底部的索引页面本身的烧瓶中处理联系表格

问题描述

@app.route('/')
def hello_world():
    return render_template("index.html")


@app.route('/success', methods=['GET', 'POST'])
def contact():
    if request.method == 'POST':
        if request.form == False:
            flash('All fields are required.')
            return render_template('index.html')
        else:
            msg = Message(request.form['subject'], sender=request.form['email'], recipients=['mustafa.bizzalley@gmail.com'])
            msg.body = """
      From: %s <%s>
      Phone: %s
             %s
      """ % (request.form['name'], request.form['email'], request.form['phone'], request.form['message'])
            mail.send(msg)
            flash('Message sent successfully')
            return render_template('index.html', success=True)

    elif request.method == 'GET':
        return render_template('index.html')
            <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">
              <!-- Starting of ajax contact form -->
    <form class="contact__form" method="post" action="{{ url_for('contact') }}">
      
      <div class="row">
          <div class="col-md-6 form-group">
              <input name="name" type="text" class="form-control" placeholder="Name" required>
          </div>
          <div class="col-md-6 form-group">
              <input name="email" type="email" class="form-control" placeholder="Email" required>
          </div>
          <div class="col-md-6 form-group">
              <input name="phone" type="text" class="form-control" placeholder="Phone" required>
          </div>
          <div class="col-md-6 form-group">
              <input name="subject" type="text" class="form-control" placeholder="Subject" required>
          </div>
          <div class="col-12 form-group">
              <textarea name="message" class="form-control" rows="3" placeholder="Message" required></textarea>
          </div>
          <div class="col-12">
              <input name="submit" type="submit" class="button-style" value="Send Message">
          </div>
      </div>


    </form>

  <!-- Starting of successful form message -->
                {% block content %}
                 {% if success %}
      <div class="row">
          <div class="col-12">
              <div class="alert alert-success contact__msg" style="display: none" role="alert">
                  {% with messages = get_flashed_messages() %}
                    {% if messages %}
                        {{ message }}
                        {% endif %}
        {% endwith %}
              </div>
          </div>
      </div>
                {% endif %}
                {% endblock %}
      <!-- Ending of successful form message -->
          </div>
        </div>

我想在提交表单后在表单下方显示成功消息，而不重定向或刷新页面或相同格式的错误消息。但我无法实现这一点，因为在烧瓶中找不到任何指南来执行上述任务，因为我发现的只是重定向到另一个页面以获取成功消息

标签： flask

解决方案

after the form is submitted without redirecting or refreshing the page- 这需要javascript。

目前正在发生的事情是，

  • 你点击提交按钮
  • 浏览器向服务器发送请求
  • 烧瓶应用程序处理请求，生成响应并将其发回

这将刷新页面。

你需要做什么，

  • 点击提交按钮
    • 在javascript中阻止事件
    • 使用jQuery或其他东西向服务器发送ajax请求
    • 一旦你从服务器得到响应
    • 根据需要在底部位置填充响应

您可以查看以下内容以供参考，

推荐阅读