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文件都没有复制粘贴。
