小白日记——前端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>。。。饶了半天还是得靠自己，不能偷懒啊，前台代码如下：

　　

 //form表单先序列话数组，然后转换成对象
function serializeObject(obj) {
            var params = obj.serializeArray();
            // 使用each方法对params进行操作
            var result = {};
            // 循环数组，将数组转为对象类型
            $.each(params, function (index, value) {
                result[value.name] = value.value;
            })
            return result;
        }
//多个数据，构成object组成的array
  function getSubjectArray() {
            let subjectIdObjectList = $("[id^='subject']");
            let subjectArray = new Array();
            for (const subjectObject of subjectIdObjectList) {
                let subjectId = $(subjectObject).val();
                let bookBeginTime = $('#bookBeginTime' + subjectId).val();
                let bookEndTime = $('#bookEndTime' + subjectId).val();
                let subject = new Object();
                subject["subjectId"] = subjectId;
                subject["bookBeginTime"] = bookBeginTime;
                subject["bookEndTime"] = bookEndTime;
                subjectArray.push(subject);
            }
            return subjectArray;
        }
//提交到后台时，要用JSON.stringify()转换成标准格式的JSON
layer.confirm('确定要保存考试计划吗？', {
                    btnAlign: "r",
                    btn: ['确定', '取消'],
                    icon: 3,
                    title: '提示',
                    area: ['470px'],
                    offset: ['120px']
                }, function (cindex) {
                    let url = '/' + projectId + '/testPlan/save'
                    let subjectArray = getSubjectArray();
           let result =serializeObject($('#testPlanDetailForm'));
                    result["testSubjectList"] = subjectArray;
                    result = JSON.stringify(result);
                    console.log(result)
                    $.ajax(url, {
                        headers: request_headers,
                        data: result,
                        method: 'POST',
                        cache: false,
                        dataType: 'json',
                        contentType: "application/json;charset=UTF-8",
                        success: function (data, status, xhr) {
                            layer.closeAll('loading');
                            if (data.status == 'SUCCESS') {
                                SystemConfig.setSuccessParam(true, {});
                                SystemMsg.success(data.msg, '提示', function () {
                                    backToHome();
                                });
                            } else {
                                SystemMsg.error(data.msg);
                            }
                            return false;
                        },
                        error: function (xhr, status, exception) {
                            if (xhr && xhr.status === 403) {
                                SystemMsg.error('没有访问该功能的权限');
                                return false;
                            } else if (xhr && xhr.status === 401) {
                                SystemMsg.error('登录已过期，请重新登录');
                                return false;
                            } else {
                                SystemMsg.error('系统内部数据错误');
                                console.log(xhr.responseText);
                                return false;
                            }
                        },
                    });

                }, function (cindex) {
                    layer.close(cindex);
                });

 

　　按照上面的方式，自信满满的改完了前台，然后点击了提及按钮。。。。结果，后台无法接收。。。。提示“utf-8编码问题”，经过一番查询后，原来是ajax提交的时候，没有设置contenType,修改以后，ajax代码如下

  $('#btnSave').click(function () {
            let cartObjectArray = initCartInfoArray();
            $.ajax({
                url: '/production/add',
                type: 'post',
                async: true,
                cache: false,
                contentType: "application/json",
                data: JSON.stringify(cartObjectArray),
                success: function (result) {
                    if (!result.status) {
                        removeAlreadyCart(cartObjectArray);
                        alert("保存成功");
                    } else {
                        alert(result.message)
                    }
                },
                error: function (xhr) {
                    alert(JSON.stringify(xhr))
                    return false;
                }
            });
        });

　　改完之后，发现仍然不能用。。。原来是 参数前面没有增加@RepnoseBody 。。尴尬啊，从C#转到java真不容易啊，加油

@RequestMapping(value = {"/add"}, method = RequestMethod.POST, produces = MediaType.APPLICATION_JSON_VALUE)
    @ResponseBody
    public ReturnVo addOrder(@RequestBody List<CartInfoVo> cartInfoVoList) {
        ReturnVo returnVo = new ReturnVo();

        if (cartInfoVoList == null || cartInfoVoList.size() < 1) {
            returnVo.setStatus(true);
            returnVo.setMessage("请至少选择一件物品");
            return returnVo;
        }
        String result = orderService.add(cartInfoVoList);
        if (StringUtils.isNotBlank(result)) {
            returnVo.setMessage(result);
            returnVo.setStatus(true);
        }
        return returnVo;
    }