我想在底部的索引页面本身的烧瓶中处理联系表格[重复]

Posted 2023-05-07

技术标签:

【中文标题】我想在底部的索引页面本身的烧瓶中处理联系表格[重复]【英文标题】：I wan to process a contact form in flask in index page itself at the bottom [duplicate] 【发布时间】：2020-01-29 15:05:14 【问题描述】：

@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>

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

【问题讨论】：

【参考方案1】：

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

目前正在发生的事情是，

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

这将刷新页面。

你需要做什么，

点击提交按钮在 javascript 中阻止事件使用 jQuery 之类的向服务器发送 ajax 请求从服务器收到响应后根据需要在底部位置填充响应

您可以参考以下内容，

阻止事件 - https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault Ajax 请求 - https://api.jquery.com/jquery.ajax/

【讨论】：