layui 表单 请求参数对象和数组同时传递向后台转载请标明地址谢谢！
layui 表单 请求参数对象和数组同时传递向后台转载请标明地址谢谢！
用户5899361
发布于 2021-01-18 10:25:55
发布于 2021-01-18 10:25:55
layui页面
因为页面中的数据使用layui的form模块获取值，formData对象无法直接将多选框的值加入请求头，所以先将获取的多选按钮的值转为数组，然后使用
formData.classId=arr_box;方法，将数组追加到formData中，后台获取值。
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/webapp/layui/css/layui.css" media="all">
</head>
<body>
<div class="layui-form demo-tree-more" style="width: 500px;margin-left: 30%;margin-top: 30px" id="screen" >
<input name="noticeId" style="display: none" value="${notice.noticeId}">
<div class="layui-form-item" style="display: inline-block">
<label class="layui-form-label">通知标题</label>
<div class="layui-input-inline">
<input type="text" name="noticeTitle" value="${notice.noticeTitle}" autocomplete="off" class="layui-input" lay-verify="required">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">发布日期</label>
<div class="layui-input-inline">
<input type="text" name="createDataTime" value="${notice.createDataTime}" id="createTime" autocomplete="off" class="layui-input" lay-verify="required">
</div>
</div>
<div class="layui-form-item" style="display: inline-block">
<label class="layui-form-label">班级名称</label>
<div class="layui-input-inline">
<div class="layui-input-inline">
<c:forEach items="${classInfo}" var="classInfo">
<c:forEach items="${selectClassInfo}" var="selectClassInfo">
<input type="checkbox" name="classId" title="${classInfo.className}" value="${classInfo.classId}" ${classInfo.classId==selectClassInfo.classId?'checked':''}>
</c:forEach>
</c:forEach>
</div>
</div>
</div>
<div style="align-content: center">
<button lay-submit lay-filter="updateAtt" class="layui-btn layui-btn-normal" style="margin-left: 80px">提交</button>
<button onclick="cancelExam()" class="layui-btn layui-btn-normal" style="margin-left: 80px">取消</button>
</div>
</div>
<script src="${pageContext.request.contextPath}/webapp/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/webapp/layui/layui.js"></script>
<script>
layui.use(['form','laydate'], function(){
var form = layui.form
,laydate = layui.laydate
//复选框渲染
form.render('checkbox');
//时间控件
laydate.render({
elem: '#createTime',
type:'date'
})
//修改通知消息
form.on('submit(updateAtt)',function (data) {
var formData = data.field;
//将多选框拼接为数组
var arr_box = [];
$('input[type=checkbox]:checked').each(function() {
arr_box.push($(this).val());
});
formData.classId=arr_box;
console.log(formData);
$.ajax({
'url':'${pageContext.request.contextPath}/notice/updateNotice',
'type':'post',
'dataType':'json',
'traditional': true,//ajax传递数组必须添加属性
'data':formData,
'success':function (data) {
alert(data.msg);
if(data.code==0){
var index = parent.layer.getFrameIndex(window.name);
parent.layui.table.reload('demo');
parent.layer.close(index);
}
},
'error':function () {
alert("服务器忙。。。");
}
})
})
});
//取消
function cancelExam() {
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
}
</script>
</body>
</html>后台获取值：
@RequestMapping("updateNotice")
public boolean updateNotice(NoticeInfo noticeInfo,Integer[] classId){
return false;
}NoticeInfo为对象，因为表单中的其他值为对象中的属性，顾框架会将其他属性封装成对象接受，classId数组将接受前台的数组。
转载请标明地址谢谢！
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录