本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议
》和
《
阿里云开发者社区知识产权保护指引
》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单
进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
这次讲的是通过复选框，选中，点击提交，并将值chuan到后台controller。这个应用是比较广的，什么批量修改，批量添加，授权管理等等，都用到这个。其实这个还是挺简单的，并没有想象中的那么难，但我看到不少朋友在此处受挫，当然曾经的我也是如此。现在给大家贴个代码分享下吧。
本文中使用的是layui框架，当然也可以不引进它，不过jquery的库还是要的。
该示例环境是spring+springmvc+mybatis plus+jdk8+mysql57+maven3以上+window10(linux也没问题)
对mybatis plus不了解的，可以参考我的文章MP实战系列,或者去mybatis plus官网了解。
springmvc不知道的，或者基本使用都有困难的，可以参照我的
Java相关框架资料及其基础资料、进阶资料、测试资料之分享
这篇文章，里面有很多资料,小白人员强烈建议参考
当有一定基础的还是建议看书和去官网看文档
我现在就时常看书和文档，官网虽然是英文的，但是现在很多翻译工具，所以阅读起来不是特别困难。不过建议有英文基础的还是要看英文。我自己时常记单词，尝试阅读英文文档。
test.html
<!DOCTYPE html>
<meta charset="UTF-8">
<title>开锁方式</title>
<link rel="stylesheet" href="../../layui/css/layui.css" media="all">
</head>
<!-- 隐藏域 -->
<input type="hidden" id="lockNo"/>
<input type="hidden" id="userId"/>
<form class="layui-form" action="#">
<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>
<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[];
@Override
public String toString() {
return "OpenLockWayQueryVo [items=" + Arrays.toString(items) + "]";
最后说明，不用mybatis plus单用mybatis也可以，只不过你只需将方法替换成你自己的即可。不过对于开发效率的提升，更好的专注于业务，建议能偷懒不自己写的，就不自己写。当然，这也是建立在mybatis用的非常熟练的前提下。如果一点都不熟，建议还是别偷懒了。想当初我也是一个一个的敲出来的，连xml文件都没有复制粘贴。
Qt+QtWebApp开发笔记（五）：http服务器html中使用json触发ajax与后台交互实现数据更新传递
前面完成了页面的跳转、登录，很多时候不刷新页面就想刷新局部数据，此时ajax就是此种技术，且是异步的。
本篇实现网页内部使用js调用ajax实现异步交互数据。
在js中使用 ajax是通过XMLHttpRequest来实现的。
