前端获取checkbox复选框的值通过数组形式传递

最新推荐文章于 2021-10-23 08:48:13 发布

weixin_30418341

最新推荐文章于 2021-10-23 08:48:13 发布

阅读量1.6k

点赞数

文章标签：前端后端 json ViewUI

原文链接：http://www.cnblogs.com/We612/p/10361726.html

版权

本文介绍了一个使用HTML、JavaScript和Python处理表单数据的案例，详细展示了如何通过AJAX将用户选择的复选框值提交到后端，并在Python中处理这些数据进行任务分享。前端使用jQuery获取选中的复选框值，通过AJAX以JSON格式发送到后端，后端接收并处理数据，实现数据去重和任务分配。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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")