无法使用 BootStrap 模态和 JQuery 将 Flask_WTF 表单数据保存到数据库

Question

我使用 Flask-WTF 在烧瓶中创建了一个基本表单，并使用 Bootstrap4 Modal + Jquery 将数据保存到后端的数据库中。我可以通过 html 页面直接保存数据，但是当我尝试在模式弹出窗口中通过 JQuery 更新相同的 HTML 页面表单时，它无法通过。

下面是我的烧瓶 view.py 的代码

@bare_blueprint.route('/add_group', methods=['GET','POST'])
def add_group():
    form = AddGroupForm()
    if form.validate_on_submit():
        group = request.form['group']
        groups = [(group.group) for group in dev_group.query.order_by('group') ]
        if group in groups:
            flash(u'Group Name Already Listed, Please choose a unique group name')
        else:
            form.group.data = ''
            new_group = dev_group(group)
            db.session.add(new_group)
            db.session.commit()
            flash(u'Group Added Successfully!')
    return render_template('add_group.html', form=form)

连接到我的 HTML 页面（运行良好）。相同的代码如下-

{% extends 'base.html' %}

{% block content %}
<h1> Add New Group </h1>
{% for message in get_flashed_messages() %}
<div class="alert alert-primary alert-dismissible fade show" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  {{ message }}
</div>
{% endfor %}
<form method='POST'>
{{ form.hidden_tag() }}
{{ form.group.label }} {{ form.group(id='groupname')}}
{{ form.submit(id='submit')}}

{% endblock %}

现在我有了第三个页面，就像我的应用程序的仪表板页面一样，我在其中创建了一个按钮，该按钮将这个表单扔到模式弹出窗口中。我正在尝试通过该模态表单将组添加到我的数据库中。

这是我的模态的 HTML 和 JQuery 代码 -

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Add group
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Add Group</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="container">
    <br><br><br><br>
    <form class="form-inline">
      <div class="form-group">
        <label class="sr-only" >Group Name</label>
        <input type="text" class="form-control" id="groupname" placeholder="Enter Group Name">
      </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      <button type="submit" class="btn btn-primary">Add Group</button>
    </div>
    </form>
    <br>
    <div id="successAlert" class="alert alert-success" role="alert" style="display:none;"></div>
    <div id="errorAlert" class="alert alert-danger" role="alert" style="display:none;"></div>
</div>

      </div>

    </div>
  </div>
</div>
<script> $(document).ready(function() {

    $('form').on('submit', function(event) {

    var group = $('#groupname').val();

        req = $.ajax({
      url : '/add_group',
      type : 'POST',
      data : {group : group},
        })
        req.done(function(data) {
      $('#groupname').html(data);
        });

        event.preventDefault();

    });

});
</script>

提交表单后，我在开发人员工具中没有看到任何错误，只是返回了我的 HTML 表单页面。

任何帮助将不胜感激。

Answer 1

开箱即用，flask-wtf 提供 CSRF（跨站点请求伪造）保护，这要求您禁用它，或者更好地包括

{{ form.csrf_token }}

在 HTML 表单的顶部。

见https://flask-wtf.readthedocs.io/en/stable/csrf.html