这次讲的是通过复选框，选中，点击提交，并将值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传数组到后台接收的更多相关文章
	

    
								
  1. 前台ajax传数组，后台java接收
		
    后端 //添加 @RequestMapping(value = "checkChoise") @ResponseBody ResultJson checkChoise(@Reque ...
    
		
    2. 
						
  2. ajax传数组到后台，后台springmvc接收数组参数
		
    var   ids= new Array();  $("input[class='detailCheck']:checked").each(function(i,k){   var ...
    
		
    3. 
						
  3. ajax 传递数组类型参数后台接收不到的问题
		
    在做排序功能的时候需要将一个数组的数据传递到后台,(当时怎么没用json,如果用json就没有那么多的事情了),数据提交采用ajax! 先看代码 js: submitbtn: function ()  ...
    
		
    4. 
						
  4. ajax传递数组及后台接收
		
    ajax传递的是{"items":arr},其中arr=[]; 在后台String[] items=req.getParameterValues("items" ...
    
		
    5. 
						
  5. ajax传递数组，后台接收为null解决方法
		
    traditional:true,加上这个就好,默认为false,即允许深度序列化参数,但是servlet api不支持,所有设为true阻止就好了. $.ajax({ type:'post', ur ...
    
		
    6. 
						
  6. ajax 传参数 java后台接收
		
    
		
    7. 
						
  7. ajax传递数组到后台
		
    //实体类 public class Person { private int ID{get;set;} private string Name{get;set;} private int Age{g ...
    
		
    8. 
						
  8. springMVC通过ajax传参到后台
		
    JSON对象和JSON字符串 在SpringMVC环境中,@RequestBody接收的是一个Json对象的字符串,而不是一个Json对象.然而在ajax请求往往传的都是Json对象,用 JSON.s ...
    
		
    9. 
						
  9. 前台ajax传参数，后台spring mvc用对象接受
		
    第二种方法:利用spring mvc的机制,调用对象的get方法,要求对象的属性名和传的参数名字一致(有兴趣的同学看 springmvc源码) 1.将参数名直接写成对象的属性名 $.ajax({ ur ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Hadoop小知识点总结1
			
    1.数据仓库warehouse一般不做更改,只做查询 2.OLTP:联机事务处理,比如:转账 OLAP:联机分析处理,比如:只做查询 3.hadoop的思想来源: GFS (Google的文件系统)即 ...
    
			
    2. 
						
  2. 接触Java的15天，初步了解面向对象
			
    面向对象的三打特征:封装 ,继承 ,多态 . 图老师给的,叫我们好好看一看 对象(object):一个杯子,一台电脑,一个人,一件衣服  等,都可以称为对象. 类:类是对象的抽象的分类:比如,人类进行 ...
    
			
    3. 
						
  3. 如何用minitab检测一组数据是否服从正态分布
			
    打开Minitab之后 点击Stat>Basic Statistics> Normality Test  分析之后若 P value(P值)>0.05,说明此组数据服从正态分布
    
			
    4. 
						
  4. Android系统常用URI
			
    android系统常用URI android系统管理联系人的URI如下: ContactsContract.Contacts.CONTENT_URI 管理联系人的Uri ContactsContrac ...
    
			
    5. 
						
  5. 读《阿里Java开发手册》总结（1）
			
    一·命名约定 类名使用大驼峰式命名(领域模式相关命名除外:如DAO\VO\DO等). 常量必须全部大写,单词中间用“_”隔开(如MAX_COUNT). 抽象类命名使用Abstract或Base开头.异 ...
    
			
    6. 
						
  6. blfs（systemv版本）学习笔记-使用apache创建简单的网页服务器
			
    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! apache项目地址:http://www.linuxfromscratch.org/blfs/view/stable/serv ...
    
			
    7. 
						
  7. 结合vue展示百度天气接口天气预报
			
    HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
    
			
    8. 
						
  8. 用 JS 写 （轮播图 / 选项卡 / 滑动门）
			
    页面中经常会用到各式各样的轮播图,今天贺贺为大家介绍一种常用的方法,对于JS我们需要举一反三,一种方法可以对多个轮播样式进行渲染. <head> <meta charset=&quo ...
    
			
    9. 
						
  9. 【转】ASP.NET Core 依赖注入
			
    DI在.NET Core里面被提到了一个非常重要的位置, 这篇文章主要再给大家普及一下关于依赖注入的概念,身边有工作六七年的同事还个东西搞不清楚.另外再介绍一下.NET  Core的DI实现以及对实例 ...
    
			
    10. 
						
  10. 测试中Android与IOS分别关注的点
			
    主要从本身系统的不同点.系统造成的不同点.和注意的测试点做总结 1.自身不同点 研发商:Adroid是google公司做的手机系统,IOS是苹果公司做的手机系统 开源程度:Android是开源的,IO ...
    
			
    11.