checkbox选中并通过ajax传数组到后台接收

Posted 2020-11-08 挑战者V

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了checkbox选中并通过ajax传数组到后台接收相关的知识，希望对你有一定的参考价值。

这次讲的是通过复选框，选中，点击提交，并将值chuan到后台controller。这个应用是比较广的，什么批量修改，批量添加，授权管理等等，都用到这个。其实这个还是挺简单的，并没有想象中的那么难，但我看到不少朋友在此处受挫，当然曾经的我也是如此。现在给大家贴个代码分享下吧。

本文中使用的是layui框架，当然也可以不引进它，不过jquery的库还是要的。

该示例环境是spring+springmvc+mybatis plus+jdk8+mysql57+maven3以上+window10(linux也没问题)

对mybatis plus不了解的，可以参考我的文章MP实战系列,或者去mybatis plus官网了解。

springmvc不知道的，或者基本使用都有困难的，可以参照我的Java相关框架资料及其基础资料、进阶资料、测试资料之分享这篇文章，里面有很多资料,小白人员强烈建议参考

当有一定基础的还是建议看书和去官网看文档

我现在就时常看书和文档，官网虽然是英文的，但是现在很多翻译工具，所以阅读起来不是特别困难。不过建议有英文基础的还是要看英文。我自己时常记单词，尝试阅读英文文档。

test.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>开锁方式</title>
<link rel="stylesheet" href="../../layui/css/layui.css" media="all">
</head>
<body>
<!-- 隐藏域 -->
<input type="hidden" id="lockNo"/>
<input type="hidden" id="userId"/>

<form class="layui-form" action="#">
    <br/>


  <div class="layui-form-item">
    <label class="layui-form-label">初始开锁</label>
    <div class="layui-input-block">
      <input type="checkbox" name="first_way" title="人脸识别" value="1" checked="checked">
      <input type="checkbox" name="first_way" title="密码" value="2" checked="checked">
      <input type="checkbox" name="first_way" title="蓝牙" value="3">
      <input type="checkbox" name="first_way" title="NFC" value="4">
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">后续开锁</label>
    <div class="layui-input-block">
      <input type="checkbox" name="laster_way" title="远程开锁" value="1" checked="checked">
      <input type="checkbox" name="laster_way" title="指纹触摸" value="2" checked="checked">
      <input type="checkbox" name="laster_way" title="其他" value="3">
      <input type="checkbox" name="laster_way" title="其他" value="4">
    </div>
  </div>
<br/>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" id="update">立即提交</button>
    </div>
  </div>
</form>
 



<!-- js -->
<script src="../../js/jquery-1.11.3.min.js"></script>
<script src="../../layui/layui.js" charset="utf-8"></script>
<script src="../../layui/lay/modules/layer.js" type="text/javascript"></script>
<script src="../../layui/lay/modules/form.js"></script>
<script src="../../js/test.js"></script>
</body>
</html>

test.js

/**
 * 开锁方式
 */

  window.onload=function(){  
  
        GetRequest();
        autoLoad();
     
    };  
    
  
    
    //截取URL参数
    function GetRequest() {
          var fullURL = window.location.href;
     
           var url = location.search; //获取url中"?"符后的字串
           var theRequest = new Object();
     
           if (url.indexOf("?") != -1) {
              var str = url.substr(1);
              strs = str.split("&");
          
              for(var i = 0; i < strs.length; i ++) {
                 theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
                 
                 $("#lockNo").val(theRequest[strs[i].split("=")[0]]);
                 
              }
           }
           return theRequest;
        }
    
    
  //自动加载获取Cookie   
    function autoLoad(){
        
        var str ="获取Cookie";
        $.ajax({
            url:"/lms/userauths/getCookie",
            type:"POST",
            data : {"str":str},
            dataType : \'json\',
            success:function(data){
            
            var json = eval("("+data+")");
            
            if(json.returnCode=="200"){
                $("#userId").val(json.userId);
            }else if(json.returnCode=="500"){
                window.location.href=\'view/Login.html\';
            }else{
                alert("有问题，请联系管理员");
            }
                
            },error:function(){
                alert("失败");
            }
        });
    }
    
  $(function(){
      
      //修改开锁方式
     $("#update").click(function(){
         
         var items = [];
         var lockNo = $("#lockNo").val();
         var items2 = [];

         $("input[name=\'first_way\']:checked").each(function() {

             items.push($(this).val());
        
         });
         
         $("input[name=\'laster_way\']:checked").each(function() {

             items2.push($(this).val());
        
         });


         $.ajax({

          type: "post",

          url: "/lms/lock/openLockModify",

          data: {items: items.join(\',\'),items2:items2.join(\',\'),lockNo:lockNo},
          
          dataType : \'json\',
          
          async:false,

          success: function(data){
              
             var json = eval("("+data+")");
             if(json.returnCode=="200"){
                 alert(json.returnMsg);
                 closeLayui();
             }else if(json.returnCode=="500"){
                 alert(json.returnMsg);
             }else{
                 alert("有异常,请联系管理员");
             }
            
          },error:function(){
              alert("有异常");
          }

        });
     
     
     });
  
  
  });
  
  
  //关闭layui弹框
  function closeLayui(){
      parent.layer.closeAll()
 }

Controller代码

    @PostMapping(value="openLockModify")
    public String openLockModify(String lockNo,OpenLockWayQueryVo openLockWayQueryVo) {
        
        logger.info("lockNo:"+lockNo);
        String items[]=openLockWayQueryVo.getItems();
        
        String items2[]=openLockWayQueryVo.getItems2();
        
        String str="";
        
        String str2="";
        
        for (int i = 0; i < items.length; i++) {
            logger.info("itmes:"+items[i]);
            str+=items[i];
        
        }
        
        logger.info("items拼接后为:"+str);
        
        for (int i = 0; i < items2.length; i++) {
            logger.info("items2:"+items2[i]);
            str2+=items2[i];
        }
        
        logger.info("items2拼接后为:"+str2);
        
        EntityWrapper<LockEntity> wrapper = new EntityWrapper<LockEntity>();
        
        wrapper.eq("lock_no", lockNo);
        
        LockEntity lockEntity = lockService.selectOne(wrapper);
        
        //门锁实体,列出需要更新的属性
        LockEntity modifyLockEntity = new LockEntity();
        modifyLockEntity.setId(lockEntity.getId());
        modifyLockEntity.setLock_no(lockEntity.getLock_no());
        modifyLockEntity.setUserId(lockEntity.getUserId());
        modifyLockEntity.setFirstOpenWay(str);
        modifyLockEntity.setLasterOpenWay(str2);
        
        boolean isModifyLock = lockService.updateById(modifyLockEntity);
                
        Map<String, Object> map = new HashMap<String, Object>();

        if(isModifyLock) {
            map.put("returnCode", "200");
            map.put("returnMsg", "修改开锁方式成功");
        }else {
            map.put("returnCode", "500");
            map.put("returnMsg", "修改开锁方式失败");
        }    
        return JSON.toJSONString(map);
    }

OpenLockWayQueryVo.java

import java.util.Arrays;

public class OpenLockWayQueryVo {
    /**
     * 初次开锁方式
     */
    String items[];
    
    /**
     * 后续开锁方式
     * @return
     */
    String items2[];
    
    
    
    
    public String[] getItems2() {
        return items2;
    }

    public void setItems2(String[] items2) {
        this.items2 = items2;
    }

    public String[] getItems() {
        return items;
    }

    public void setItems(String[] items) {
        this.items = items;
    }

    @Override
    public String toString() {
        return "OpenLockWayQueryVo [items=" + Arrays.toString(items) + "]";
    }
    
    
}

最后说明，不用mybatis plus单用mybatis也可以，只不过你只需将方法替换成你自己的即可。不过对于开发效率的提升，更好的专注于业务，建议能偷懒不自己写的，就不自己写。当然，这也是建立在mybatis用的非常熟练的前提下。如果一点都不熟，建议还是别偷懒了。想当初我也是一个一个的敲出来的，连xml文件都没有复制粘贴。

以上是关于checkbox选中并通过ajax传数组到后台接收的主要内容，如果未能解决你的问题，请参考以下文章

js之checkbox判断常用示例

js之radio应用实例

ajax传数组到后台，后台springmvc接收数组参数

javascript中如何传个数组到后台String [ ] 接收？

ajax传数组后台GO语言接收

AJAX 异步传数组时候，后台接收不到！