首先前台代码
页面结构
<form>
<table>....User对象...</table>
<table>
<tr>role对象</tr>
<tr>role对象</tr>
<tr>role对象</tr>
<tr>role对象</tr>
</table>
</form>
要将这些数据一次性发送给后台
扫描二维码关注公众号,回复:
391350 查看本文章
两个工具方法
/** * 将json数组转为json对象 * @param data * @returns {{}} */ function serializeObject(data){ //输出以数组形式序列化表单值 //var data = $('#form').serializeArray(); var obj = {}; $.each(data,function(i,v){ obj[v.name] = v.value; }) return obj; } /** * 将table中多个相同对象处理为json对象数组 * @param object * @param $object * @returns {Array} */ function constructObjectFromTable(object, $object) { var javaObjArray = []; $object.each(function (i) { var javaObj = {}; for (var p in object) { var $val = $(this).find('input[name="' + p + '"]'); if ($val.length === 0) { javaObj[p] = $(this).find('select[name="' + p + '"]').val(); } else { javaObj[p] = $val.val(); } } javaObjArray.push(javaObj); }); return javaObjArray; }
然后是提交
//保存新增用户 function save() { //验证必填项 var flag = false; $("input[required='required']").each(function () { if ($(this).val() == '') { layer.alert("有必填项为空"); $(this).focus(); flag = true; return;//跳出循环 } }); if (flag) { return; } var userRole = {};//后台中,此对象有两个属性,一个是User user,;一个是List<Role> roles; var user = serializeObject($("#addForm").serializeArray());//显得到user userRole.user=user; var role = {roleName:'',roleCode:''};//字段要和后台对象对应 var roles = constructObjectFromTable(role,$('#tblistAdd .bodyTr'));//再得到roles; userRole.roles = roles; $.ajax({ type: 'post', dataType: 'json', url: '/user/save', contentType: "application/json; charset=utf-8", /*contentType:'application/json,charset=utf-8"',*/ data: JSON.stringify(userRole), success: function (data) { if (data.isSuccess) { //window.parent.location.reload(); //刷新父页面 layer.alert("保存成功"); parent.location.href = parent.location.href; parent.layer.close(parent.layer.getFrameIndex(window.name)); } else { layer.alert(data.msg) } }, error: function () { layer.alert("请求错误"); } }) }
然后后台实体类
@Data public class UserRole extends BaseModel { private User user; private List<Role> roles; }
控制层Controller
@RequestMapping("/save") @ResponseBody public ResponseEntity add (HttpServletRequest request, @RequestBody UserRole userRole){ try { //userService.save(userRole.getUser()); User user = userRole.getUser(); List<Role> roles = userRole.getRoles(); } catch (Exception e) { logger.error("e",e); return ResponseEntity.fail("500","保存失败"); } return ResponseEntity.ok(""); }
ok了!!!!