[Flask][Ajax]如何发送和获取多个复选框值

Question

我尝试使用AJAX提交多个复选框值，然后将选中项添加到div元素。由于复选框的数量因情况而异，我不知道如何发送和获取如此多的数据。在下面的HTML代码中，列表person_name的长度根据用户的不同而变化

HTML:

 {% for name in person_names %}
      <label><input type="checkbox" name="check" value="{{name}}">{{name}}</label>
 {% endfor %}
 <a href=# id="add">Add</a>                                        

 <div id="names">
      Your checked names are: 
      {% for ckname in cknames%}
      <p>{{ckname}}</p>
      {%endfor%}
 </div>

Javascript:

$('a#add').bind('click',function(){
$.ajax({
    url: "/regist",
    type: "GET",
    contentType: 'application/json;charset=UTF-8',
    data: { /* I can't find a way */},
    dataType:"json",
    success: function (data) {
    var div = document.createElement('div');
    document.getElementById('names').appendChild(div);
    } 
});
})

Python:

@app.route("/")
def index():
     return render_template('index.html')

@app.route("/regist")
def register():
    cknames = request.form.getlist('check')
    return cknames %??

另外，我不想重定向页面，只想添加div元素。感谢您的帮助

Answer 1

您可以使用$('[name=check]').serialize()获取数据，但您的请求是错误的。
从form.getlist收到的数据需要通过POST和表单数据格式发送

$('a#add').bind('click',function(){    
    $.ajax({
        url: "/regist",
        type: "POST",
        data: $('[name=check]').serialize(),
        dataType:"json",
        success: function (data) {
            var div = document.createElement('div');
            document.getElementById('names').appendChild(div);
        },
        error: function(){
            console.log(arguments);
        }
    });    
})