小白日记——前端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 function initCartInfoArray() {
 2         let cartObjectArray = new Array();
 3         //获取所有选中框
 4         let checkObject = $('#cartBox input[name="cartCheck"]:checked');
 5         if (checkObject) {
 6             $.each(checkObject, function (k, checkCart) {
 7                 let tempCartData = $(checkCart).parents('.order_lists');
 8                 let tempCart = generateCartObject(tempCartData);
 9                 if (tempCart) {
10                     cartObjectArray.push(tempCart);
11                 }
12             })
13         }
14         return cartObjectArray;
15     }
16 
17     function generateCartObject(cartData) {
18         let cart = new Object();
19         let propertyArray = ['sid', 'productName', 'productType', 'priceAvgMin', 'priceAvgMax', 'quantity', 'image'];
20         for (let i = 0; i < propertyArray.length; i++) {
21             cart = setCartPropertyValue(propertyArray[i], cart, cartData);
22         }
23         return cart;
24     }
25 
26     function setCartPropertyValue(propertyName, cart, cartData) {
27         let propertyValue = $('input[name="' + propertyName + '"]', cartData).val()
28         if (propertyValue) {
29             cart[propertyName] = propertyValue;
30         } else {
31             cart[propertyName] = '';
32         }
33         return cart;
34     }
35

　　按照上面的方式，自信满满的改完了前台，然后点击了提及按钮。。。。结果，后台无法接收。。。。提示“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     }