小白日记——前端js组装list对象,后台接收问题
今天项目中遇到了一个问题,页面中的数据,需要组装成一个list后,然后提交到后台。
之前在c#中,直接在后台Controller中定义对应的 List<object>即可,但是在java中经过一番尝试以后,发现竟然无法组装成对应的对象!!!然后就开始了我的填坑之旅。
首先,F12看了一下后台form表单,提交过来的数据,原来是多个list<String>的对象,每个字段对应一个list,难怪后台无法自动组装成list<Object>对象
于是,改变思路,想到jquery中对form的序列化,改成ajax后台提交。
结果,第二个问题出现了。。。。jquery.SerilizArray()方法,只是将每个字段都封装到了一个array中,还是无法自动组装成Array<Object>的方式。
然后,想了想只能自己组装一个Array<Object>。。。饶了半天还是得靠自己,不能偷懒啊,前台代码如下:
1 //form表单先序列话数组,然后转换成对象 2 function serializeObject(obj) { 3 var params = obj.serializeArray(); 4 // 使用each方法对params进行操作 5 var result = {}; 6 // 循环数组,将数组转为对象类型 7 $.each(params, function (index, value) { 8 result[value.name] = value.value; 9 }) 10 return result; 11 } 12 //多个数据,构成object组成的array 13 function getSubjectArray() { 14 let subjectIdObjectList = $("[id^='subject']"); 15 let subjectArray = new Array(); 16 for (const subjectObject of subjectIdObjectList) { 17 let subjectId = $(subjectObject).val(); 18 let bookBeginTime = $('#bookBeginTime' + subjectId).val(); 19 let bookEndTime = $('#bookEndTime' + subjectId).val(); 20 let subject = new Object(); 21 subject["subjectId"] = subjectId; 22 subject["bookBeginTime"] = bookBeginTime; 23 subject["bookEndTime"] = bookEndTime; 24 subjectArray.push(subject); 25 } 26 return subjectArray; 27 } 28 //提交到后台时,要用JSON.stringify()转换成标准格式的JSON 29 layer.confirm('确定要保存考试计划吗?', { 30 btnAlign: "r", 31 btn: ['确定', '取消'], 32 icon: 3, 33 title: '提示', 34 area: ['470px'], 35 offset: ['120px'] 36 }, function (cindex) { 37 let url = '/' + projectId + '/testPlan/save' 38 let subjectArray = getSubjectArray(); 39 let result =serializeObject($('#testPlanDetailForm')); 40 result["testSubjectList"] = subjectArray; 41 result = JSON.stringify(result); 42 console.log(result) 43 $.ajax(url, { 44 headers: request_headers, 45 data: result, 46 method: 'POST', 47 cache: false, 48 dataType: 'json', 49 contentType: "application/json;charset=UTF-8", 50 success: function (data, status, xhr) { 51 layer.closeAll('loading'); 52 if (data.status == 'SUCCESS') { 53 SystemConfig.setSuccessParam(true, {}); 54 SystemMsg.success(data.msg, '提示', function () { 55 backToHome(); 56 }); 57 } else { 58 SystemMsg.error(data.msg); 59 } 60 return false; 61 }, 62 error: function (xhr, status, exception) { 63 if (xhr && xhr.status === 403) { 64 SystemMsg.error('没有访问该功能的权限'); 65 return false; 66 } else if (xhr && xhr.status === 401) { 67 SystemMsg.error('登录已过期,请重新登录'); 68 return false; 69 } else { 70 SystemMsg.error('系统内部数据错误'); 71 console.log(xhr.responseText); 72 return false; 73 } 74 }, 75 }); 76 77 }, function (cindex) { 78 layer.close(cindex); 79 });
按照上面的方式,自信满满的改完了前台,然后点击了提及按钮。。。。结果,后台无法接收。。。。提示“utf-8编码问题”,经过一番查询后,原来是ajax提交的时候,没有设置contenType,修改以后,ajax代码如下
1 $('#btnSave').click(function () { 2 let cartObjectArray = initCartInfoArray(); 3 $.ajax({ 4 url: '/production/add', 5 type: 'post', 6 async: true, 7 cache: false, 8 contentType: "application/json", 9 data: JSON.stringify(cartObjectArray), 10 success: function (result) { 11 if (!result.status) { 12 removeAlreadyCart(cartObjectArray); 13 alert("保存成功"); 14 } else { 15 alert(result.message) 16 } 17 }, 18 error: function (xhr) { 19 alert(JSON.stringify(xhr)) 20 return false; 21 } 22 }); 23 });
改完之后,发现仍然不能用。。。原来是 参数前面没有增加@RepnoseBody 。。尴尬啊,从C#转到java真不容易啊,加油
1 @RequestMapping(value = {"/add"}, method = RequestMethod.POST, produces = MediaType.APPLICATION_JSON_VALUE) 2 @ResponseBody 3 public ReturnVo addOrder(@RequestBody List<CartInfoVo> cartInfoVoList) { 4 ReturnVo returnVo = new ReturnVo(); 5 6 if (cartInfoVoList == null || cartInfoVoList.size() < 1) { 7 returnVo.setStatus(true); 8 returnVo.setMessage("请至少选择一件物品"); 9 return returnVo; 10 } 11 String result = orderService.add(cartInfoVoList); 12 if (StringUtils.isNotBlank(result)) { 13 returnVo.setMessage(result); 14 returnVo.setStatus(true); 15 } 16 return returnVo; 17 }