AJAX POST Flask WTForm 不刷新页面

Posted 2023-02-19

【中文标题】AJAX POST Flask WTForm 不刷新页面

【英文标题】：AJAX POST Flask WTForm without refreshing the page

【发布时间】：2016-10-04 04:05:38

【问题描述】：

您好，我有一个简单的网页，里面有一个电子邮件表单。我正在尝试从中收集数据并填充数据库而不刷新模板。到目前为止，这是我的代码：

表格：

from flask_wtf import Form

class EmailForm(Form):
email = StringField('Email Address', [
    DataRequired(message='Required field'),
    Email(message='Please provide a valid email address')
])

submit = SubmitField('send')

路线：

@app.route('/', methods=('GET', 'POST'))
def index():
form = EmailForm(request.form)
if request.method == 'POST' and form.validate_on_submit():
    try:
        email = Email(form.data['email'])
        db.session.add(email)
        db.session.commit()
    except IntegrityError as e:
        app.logger.info(e)

    return redirect(url_for('index'))

return render_template('index.html', form=form)

阿贾克斯：

$(function() 
  $('#email_submit').bind('click', function() 
    $.getJSON('/', 
      email: $('input[name="email"]').val()
    );
    return false;
  );
);

模板：

<form name="collectEmail" id="collectForm" method="post" action=" url_for('index') ">
     form.hidden_tag() 
     form.csrf_token 
    % if form.csrf_token.errors %
      <div class="warning">You have submitted an invalid CSRF token</div>
    % endif %

    <div class="input-group">
       form.email(class='form-control', placeholder='Your Email *', type='email')
      <p class="help-block text-danger"></p>

      <span class="input-group-btn">
         form.submit(class='btn btn-primary', id='email_submit', type='submit') 
      </span>
    </div>
</form>

数据库成功填充；但是，我想避免在提交表单后刷新页面。

【问题讨论】：

页面刷新时，您是点击提交按钮还是按回车键提交表单？

使用 HTTP 代码 204 发送回空响应。

您需要删除<form>标签中的method和action属性。由于method 属性的值为POST，因此数据被“发布”并且浏览器获取返回的任何内容。您还必须更改 return redirect(url_for('index')) 部分以返回 JSON 数据，或者如果您没有任何数据要返回，则只需离开 return。

【参考方案1】：

您没有使用 AJAX 发送请求，#email_submit 是提交类型的输入，而不是按钮，因此如果您不使用 preventDefault()，您最终会执行该输入的默认行为。

你有两个选项，一个是使用 preventDefault() 另一个是将该输入切换到一个按钮，所以它不会在 javascript 代码运行之前提交表单。