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>
<htmlheadmeta charset="UTF-8"title>开锁方式</link rel="stylesheet" href="../../layui/css/layui.css" media="all"body<!-- 隐藏域 -->
input type="hidden" id="lockNo"/>
="userId"/>

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


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

  >后续开锁="laster_way"="远程开锁"="指纹触摸"="其他"/>
  button ="layui-btn"="update">立即提交buttonform>
 



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

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},async:false,success: function(data){
              
             var json = eval("("+data+")");
             =="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);
        
        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");
        }    
        return JSON.toJSONString(map);
    }

OpenLockWayQueryVo.java

import java.util.Arrays;

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

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

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

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

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

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

相关文章