AJAX POST Flask WTForm 不刷新页面

Question

Good day, I have a simple web page with an email form in it. I'm trying to collect the data from it and populate a database without refreshing the template. Here is my code so far:

Form:

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')

Route:

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

Ajax:

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

Template:

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

The database successfully populates; but, I would like to avoid refreshing the page after submitting the form.

Answer 1

You are not sending the request with AJAX, #email_submit is an input of type submit, not a button, so if you don't use preventDefault() you end up executing the default behaviour of that input.

You have 2 options there, one is using preventDefault() and the other is to switch that input to a button, so it won't submit the form before the javascript code runs.