在同一时间验证Flask表单并传递JavaScript数组

Question

如何在同一视图中同时传递JavaScript值和验证表单？因为您只能向$.ajax({data: X})传递一个值“X”，现在我知道我可以向data:传递一个字典，但这不会计算$('form').serialize()。现在我有$.ajax({})来处理表单验证，还有一个$.post()来将javascript数组传递给Flask视图。验证是True，但是jsArray从未提交！。我错过了什么？在

在索引.html 在

{% from '_formhelpers.html' import render_field %}
<form>
  {{ form.hidden_tag() }}
  {{ render_field(form.first_name)}}
  {{ render_field(form.last_name) }}
  <button id='submit-btn'>submit</button>
</form>
<script>
  var jsArray = JSON.stringify([{'item1': 'value1'}, {'item2': 'value2'}]);
  $('#submit-btn').click(function(event) {

    $.post(url: '/', data:jsArray, mimetype: 'application/json', success: function(){alert('data post success')});
    $.ajax({
      type: 'POST',
      url: '/',
      data: $('form').serialize(),
      success: function(data) {
        window.location.replace('/success');
      }
    });
    event.preventDefault();
  });
</script>

在测试.py 在

^{pr2}$

在_表单帮助器.html在

{% macro render_field(field) %}
  <dt>{{ field.label }}
  <dd>{{ field(**kwargs)|safe }}
  {% if field.errors %}
    <ul class='error'>
      {% for error in field.errors %}
        <li>{{ error }}</li>
      {% endfor %}
    </ul>
  {% endif %}
  </dd>
{% endmacro %}

Answer 1

下面是一个实际的例子，希望能完全满足您的需要。在

在测试.py在

from flask import render_template, Flask, jsonify
from flask_wtf import FlaskForm
from wtforms import StringField
from wtforms.validators import DataRequired

app = Flask(__name__)
app.secret_key = 'example'

class MyForm(FlaskForm):
    first_name = StringField('first name', validators=[DataRequired('please enter your name')])
    last_name = StringField('last name', validators=[DataRequired()])

@app.route('/')
def home():
    form = MyForm()
    return render_template('example.html', form=form)

@app.route('/something/', methods=['post'])
def something():
    form = MyForm()
    if form.validate_on_submit():
        return jsonify(data={'message': 'hello {}'.format(form.first_name.data)})
    return jsonify(data=form.errors)

if __name__ == '__main__':
    app.run(debug=True)

在示例.html在

^{pr2}$

如果验证失败，我们将返回整个form.errors字典。在