layui提交(ajax方式)checkbox多个复选框值(数组)到后台用数组接收

问题

layui的form中,选中多个checkbox复选框(name都相同)时,data.field中只会有最后一个选中的checkbox的值!
jsp代码:

<div class="layui-form-item" pane>
	    <label class="layui-form-label">驳回后不再上传</label>
        <div class="layui-input-block">
            <c:forEach items="${openUploadArr }" var="v" varStatus="status">
                <c:set var="currBankTypeEnum" value="${BankType.getEnumByValue(v) }"/>
                <input type="checkbox" name="noRepeatUploadBanks" value="${currBankTypeEnum.value }" title="${currBankTypeEnum.desc }" <c:forEach items="${noRepeatUploadBankArr }" var="nrub"><c:if test="${nrub eq currBankTypeEnum.value }">checked="checked"</c:if></c:forEach>>
            </c:forEach>
        </div>
</div>

js代码(控制台输出data.field):

layui.use('form', function(){
	    var form = layui.form;
	    form.on('submit(submit)', function(data){
 		    console.log(data.field) //当前容器的全部表单字段,名值对形式:{name: "value"}
 		    ......
 		});
});

控制台输出:
在这里插入图片描述

解决

方式一(不推荐)

在提交form前先遍历所有选中的checkbox,将他们的value拼接成字符串,写入到data.field中,再传到后台用字符串接收,后台再切割成数组。
前台:

layui.use('form', function(){
	    var form = layui.form;
	    form.on('submit(submit)', function(data){
 		    //console.log(data.field) //当前容器的全部表单字段,名值对形式:{name: "value"}
 		    
 		    //获取checkbox数据,拼接成字符串!!!!!!
 		    var noRepeatUploadBanksStr = "";
 		    var r = document.getElementsByName("noRepeatUploadBanks");
 		    for (var i = 0; i < r.length; i++) {
	 		    if (r[i].checked) {
	 		    	noRepeatUploadBanksStr+= "," + r[i].value;
	 		    }
 		    }
 		    if (noRepeatUploadBanksStr.length > 0) {
 		        noRepeatUploadBanksStr = noRepeatUploadBanksStr.substring(1);
 		    }
 		    data.field.noRepeatUploadBanksStr = noRepeatUploadBanksStr;
 		   
		    var url="${pageContext.request.contextPath}/admin/doEditSysSetting";
		  
		    layer.confirm('您确认保存设置吗', {icon: 3, title:'提示'}, function(index){
		  		layer.close(index);//关闭询问弹框
	          	$.ajax({
	          		type: "POST", 
	        	  	url: url, 
	        	  	data: data.field,
	        	  	dataType:"json",
	        	  	success: function(returnData){
	        		  	if(returnData.code==1){
	        		  		//修改隐藏input[oldCrontabStatusInt]的值
	        		  		var new_oldCrontabStatusInt = returnData.obj;
	        		  		$('input[name=oldCrontabStatusInt]').val(new_oldCrontabStatusInt);
	        			  	layer.msg('保存成功', {
	            				icon: 1,
	            				time: 20000, //20s后自动关闭
	            			    btn: ['确定']
	            		  	}, function(){
	            				parent.layer.closeAll();
	            		  	});
	                  	}else{
	                      	layer.msg(returnData.msg, {icon: 2});
	                  	}
	        	  	}
	          	}); 	  	
	        });
		  
		    return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
		});
	});

后台:

@RequestMapping("/doEditSysSetting")
@ResponseBody
public ResultInfo doEditSysSetting(HttpServletRequest request,int oldCrontabStatusInt, String noRepeatUploadBanksStr){
}

方式二(推荐)

在提交form前先遍历所有选中的checkbox,过将value组装成js数组,写入到data.field中,再传到后台直接用数组接收。值得注意的是:ajax提交数组到后台,需要设置参数traditional: true,该参数表示是否使用传统的方式浅层序列化。
前台:

layui.use('form', function(){
	    var form = layui.form;
	    form.on('submit(submit)', function(data){
 		    //console.log(data.field) //当前容器的全部表单字段,名值对形式:{name: "value"}
 		    
 		    //获取checkbox数据,组装成数组!!!!!!
 		    var noRepeatUploadBanks =[]; 
			$('input[name="noRepeatUploadBanks"]:checked').each(function(index, domEle){ 
				noRepeatUploadBanks.push($(this).val()); 
			});
			data.field.noRepeatUploadBanks = noRepeatUploadBanks;
 		    
		    var url="${pageContext.request.contextPath}/admin/doEditSysSetting";
		    
		    layer.confirm('您确认保存设置吗', {icon: 3, title:'提示'}, function(index){
		  		layer.close(index);//关闭询问弹框
	          	$.ajax({
	          		type: "POST", 
	        	  	url: url, 
	        	  	data: data.field,
	        	  	traditional: true, //是否使用传统的方式浅层序列化,若有数组参数或对象参数需要设置true!!!!!!
	        	  	dataType:"json",
	        	  	success: function(returnData){
	        		  	if(returnData.code==1){
	        		  		//修改隐藏input[oldCrontabStatusInt]的值
	        		  		var new_oldCrontabStatusInt = returnData.obj;
	        		  		$('input[name=oldCrontabStatusInt]').val(new_oldCrontabStatusInt);
	        			  	layer.msg('保存成功', {
	            				icon: 1,
	            				time: 20000, //20s后自动关闭
	            			    btn: ['确定']
	            		  	}, function(){
	            				parent.layer.closeAll();
	            		  	});
	                  	}else{
	                      	layer.msg(returnData.msg, {icon: 2});
	                  	}
	        	  	}
	          	});  	
	        });
		  
		    return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
		});
	});

后台:

@RequestMapping("/doEditSysSetting")
@ResponseBody
public ResultInfo doEditSysSetting(HttpServletRequest request,int oldCrontabStatusInt, String[] noRepeatUploadBanks){
}

总结

1.layui提交checkbox复选框多个值的时候只会提交最后一个的值,故需要手动处理,要么拼接成字符串传到后台用字符串接收后再切割成数组,要么组装成js数组传到后台直接用数组接收;
2.ajax提交数组到后台,需要设置参数traditional: true。(layui提交form表单就是使用的ajax方式)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值