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传数组到后台接收的更多相关文章
- 前台ajax传数组，后台java接收
后端 //添加 @RequestMapping(value = "checkChoise") @ResponseBody ResultJson checkChoise(@Reque ...
- ajax传数组到后台，后台springmvc接收数组参数
var ids= new Array(); $("input[class='detailCheck']:checked").each(function(i,k){ var ...
- ajax 传递数组类型参数后台接收不到的问题
在做排序功能的时候需要将一个数组的数据传递到后台,(当时怎么没用json,如果用json就没有那么多的事情了),数据提交采用ajax! 先看代码 js: submitbtn: function () ...
- ajax传递数组及后台接收
ajax传递的是{"items":arr},其中arr=[]; 在后台String[] items=req.getParameterValues("items" ...
- ajax传递数组，后台接收为null解决方法
traditional:true,加上这个就好,默认为false,即允许深度序列化参数,但是servlet api不支持,所有设为true阻止就好了. $.ajax({ type:'post', ur ...
- ajax 传参数 java后台接收
- ajax传递数组到后台
//实体类 public class Person { private int ID{get;set;} private string Name{get;set;} private int Age{g ...
- springMVC通过ajax传参到后台
JSON对象和JSON字符串 在SpringMVC环境中,@RequestBody接收的是一个Json对象的字符串,而不是一个Json对象.然而在ajax请求往往传的都是Json对象,用 JSON.s ...
- 前台ajax传参数，后台spring mvc用对象接受
第二种方法:利用spring mvc的机制,调用对象的get方法,要求对象的属性名和传的参数名字一致(有兴趣的同学看 springmvc源码) 1.将参数名直接写成对象的属性名 $.ajax({ ur ...
随机推荐
- 【JVM】6、聊聊JVM常用参数设置
整体考虑堆大小 -Xms3550m, 初始化堆大小.通常情况和-Xmx大小设置一样,避免虚拟机频繁自动计算后调整堆大小. -Xmx3550m,最大堆大小. 考虑分代设置堆大小 首先通过jstat等工具 ...
- javascript如何操作数组
说明 如需求:后台返回一个用户列表数组,该数组可能为空,最多只可能会有10个用户, 页面中A,B两处展示用户列表,B处不管如何都会展示返回的所有用户,A处需要展示10个用户,不足10个展示默认用户, ...
- blfs（systemv版本）学习笔记-wget的安装与配置
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! blfs wget项目地址:http://www.linuxfromscratch.org/blfs/view/8.3/basi ...
- React-classnames库
今天在项目中看到了大佬引入了classnames,之前没用过所以去搜了搜,感觉还真的是挺好用的,搜到一篇很不错的文章,跟原创作者交流了一下就转载过来了! 下面废话不多说,我们直接来看文章吧 首先我们我 ...
- ionic3打包不能prod的问题
在最近的项目中,我ionic3采用了懒加载,来提高性能.但是当我普通打包的时候,正常成功了,但是加上--prod的时候,就报错了. 报错如下: 大概意思就是page是声明的一部分,然后请在更高级声明之 ...
- Linux 为linux enterprises 6安装图形桌面教程
为linux enterprises 6安装图形桌面教程 by:授客 QQ:1033553122 安装系统后发现没图形界面,安装Xwindow[为了避免权限不足,以root登录] 步骤1.启动图形界面 ...
- (后端)excel设置日期格式的步骤
在excel中设置日期格式,分直接设置和代码设置. 一.直接设置: 选取日期所在的单元格,单元格右键菜单中--设置单元格格式.在单元格格式窗口中选数字类型为“日期”在右边的列表框中选取相应的日期格式即 ...
- JS笔记（三）：数组、函数、类
(一) 数组 //创建数组 var the_array = [1,2,3,4,'5'] console.log(the_array[0]) //读取索引为0的数据 the_array[5] = '赋值 ...
- mysql的varchar字段可以存储多少个中文字符
创建数据库,并创建一张表mytb进行测试 ******************************************************************************* ...
- Django中ORM介绍和字段及字段参数 Object Relational Mapping(ORM)
Django中ORM介绍和字段及字段参数 Object Relational Mapping(ORM) ORM介绍 ORM概念 对象关系映射(Object Relational Mapping,简 ...