[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);
        }
    });    
})