前端获取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")
View Code

 

转载于:https://www.cnblogs.com/We612/p/10361726.html

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,在前端页面中,需要为复选框设置一个相同的 name ,然后使用 JavaScript 获取选中的复选框,将其转换为数组并提交给后端 servlet。 HTML代码示例: ``` <form> <label><input type="checkbox" name="fruit" value="apple"> Apple</label> <label><input type="checkbox" name="fruit" value="banana"> Banana</label> <label><input type="checkbox" name="fruit" value="orange"> Orange</label> <button type="button" onclick="submitForm()">Submit</button> </form> ``` JavaScript代码示例: ``` function submitForm() { // 获取选中的复选框,转换为数组 var selectedFruits = Array.from(document.querySelectorAll('input[name="fruit"]:checked')).map(e => e.value); // 创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 设置请求方法和URL xhr.open('POST', '/servletName'); // 设置请求头 xhr.setRequestHeader('Content-Type', 'application/json'); // 发送请求 xhr.send(JSON.stringify(selectedFruits)); // 监听响应 xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // 获取响应数据 var responseData = xhr.responseText; // 将响应数据转换为数组并显示在页面上 var responseArray = JSON.parse(responseData); var output = responseArray.join(', '); document.querySelector('#output').textContent = output; } }; } ``` 在后端 servlet 中,使用 request.getParameterValues() 方法获取前端传递数组,并进行相应的操作,然后将处理后的数组转换为字符串并返回给前端页面。 Java代码示例: ``` protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 获取前端传递数组 String[] selectedFruits = request.getParameterValues("fruit"); // 进行相应的操作 // ... // 将处理后的数组转换为字符串并返回给前端页面 String responseString = Arrays.toString(selectedFruits); response.setContentType("application/json"); PrintWriter out = response.getWriter(); out.print(responseString); out.flush(); } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值