前端获取checkbox复选框的值 通过数组形式传递
html代码：
<form role="form" class="select_people">
<div style="display: inline-block; margin-left: 30px; margin-top: 0">
<label for="name">应用一组</label>
{% for peopel_1 in peopels_1 %}
<div class="checkbox">
<label><input type="checkbox" value={{ peopel_1.name }} name="people_name">{{ peopel_1.name }} </label>
</div>
{% endfor %}
</div>
<div style="display: inline-block; margin-left: 40px">
<label for="name">应用二组</label>
{% for peopel_2 in peopels_2 %}
<div class="checkbox">
<label><input type="checkbox"value={{ peopel_2.name }} name="people_name">{{ peopel_2.name }} </label>
</div>
{% endfor %}
</div>
<button type="submit" style="margin-left: 40px" id="sub_people" data-dismiss="modal"
class="btn btn-default">提交</button>
</form>
js代码：
1 获取已选中的名字并放到数组中
var name_list = [];
$("input[name='people_name']:checked").each(function(){
name_list.push($(this).val)
});
2 利用ajax向后台传递form表单数据
$(".select_people").submit(function(event){
event.preventDefault(); // 阻止默认表单的action功能
var name_list = [];
$("input[name='people_name']:checked").each(function(){
name_list.push($(this).val)
});
data = {'id': 1, 'names': name_list};
$.ajax({
url: "task_mgm/********",
type: "POST",
data: JSON.stringify(data),
contentType: "application/json", //发送到后台的数据格式
data_type: "json", // 接收后端返回的数据格式
success: function(resp){
if (resp.error == "OK"){ console.log('分享成功') }
else { console.log('分享失败') }
}
});
})
python后台代码：
1 @task_mgm.route('/taskinfo_share_people', methods=['POST', 'GET']) 2 @login_required 3 def taskinfo_share_people_fun(): 4 datas = request.get_json() 5 task_id = datas.get('id') 6 sharePeopleList = datas.get('names') 7 print(sharePeopleList) 8 task = ShareTask() 9 if len(sharePeopleList) > 0: 10 task.taskId = task_id 11 12 sharePeopleList = list(set(sharePeopleList)) # 去重 13 sharePs = ','.join(sharePeopleList) 14 task.sharePeopleTo = sharePs 15 task.sharePeopleFrom = current_user.name 16 db.session.add(task) 17 db.session.commit() 18 return jsonify(error='OK', emsg="True") 19 else: 20 return jsonify(error='NO', emsg="False")
