java后台接收前端对象数组

- 日理万妓 2022-04-15 02:37 1394阅读 0赞

应用场景：盘点需要批量修改，如图所示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmcyMHk4_size_16_color_FFFFFF_t_70][]  
当我点击盘点的时候需要获取form表单中的批量数据;

**思路：首先，各位肯定知道我们如何传递一个常用类型的数组对象，比如String\[\] strs、Integer\[\] ids之类的对象，最常见的操作，批量删除！同样，传递对象数组一样的道理，以对象为单位，比如VoStudent对象，包含两个域String name和int age，那么我们前端传JSON格式的字符串数组对象就好了。****DEMO：var argument = '\[\{"age":"1","name":"李四"\},\{"age":"2","name":"张三"\}\]'；****而后端接收使用@RequestBody List<VoStudent> voStudnetList 来接收数据；**

实现方案1):

![20181120155235271.png][]

</script>

![20181120155534803.png][]

实现方案2)：如果是表单的话是需要处理的，下面直接贴方法,函数serializeJson()可以直接用，嫌麻烦直接拿去用

//将表单序列化成json格式的数据(但不适用于含有控件的表单，例如复选框、多选的select)  
    (function($)\{  
      $.fn.serializeJson = function()\{  
        var jsonData = \{\};  
        var serializeArray = this.serializeArray();  
        $(serializeArray).each(function () \{  
          if (jsonData\[this.name\]) \{  
            if ($.isArray(jsonData\[this.name\])) \{  
              jsonData\[this.name\].push(this.value);  
            \} else \{  
              jsonData\[this.name\] = \[jsonData\[this.name\], this.value\];  
            \}  
          \} else \{  
            jsonData\[this.name\] = this.value;  
          \}  
        \});  
        var vCount = 0;  
        for(var item in jsonData)\{  
          var tmp = $.isArray(jsonData\[item\]) ? jsonData\[item\].length : 1;  
          vCount = (tmp > vCount) ? tmp : vCount;  
        \}  
        if(vCount > 1) \{  
          var jsonData2 = new Array();  
          for(var i = 0; i < vCount; i++)\{  
            var jsonObj = \{\};  
            for(var item in jsonData) \{  
              jsonObj\[item\] = jsonData\[item\]\[i\];  
            \}  
            jsonData2.push(jsonObj);  
          \}  
          return JSON.stringify(jsonData2);  
        \}else\{  
          return "\[" + JSON.stringify(jsonData) + "\]";  
        \}  
      \};  
    \})(jQuery);

//批量处理  
    $('\#inventoryListSubmit').click(function()\{  
        var data = $('\#inventoryForm').serializeJson();

$.ajax(\{  
               url: '$\{ctx\}/abc/updateInventoryFormList',  
            type: 'POST',  
            data: data,  
            dataType:'json',  
            contentType:'application/json;charset=utf-8',  
            success: function (data) \{  
                if(data.status)\{  
                    $.Pro(data.info);  
                    setTimeout("goBack()",1000);   
                \}else\{  
                    $.Pro('网络错误');  
                \}  
                disabledBtn("\#cancel");  
            \},  
            error: function (data) \{  
                console.log(data.status);  
            \}  
        \});  
    \});

后台接收和上面demo一样的！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmcyMHk4_size_16_color_FFFFFF_t_70]: /images/20220415/828dce19671a4ac986953d9f0fb1f9f7.png
[20181120155235271.png]: /images/20220415/6f8a61b0fc08408284bbd36f66db8ef9.png
[20181120155534803.png]: /images/20220415/7012e322192b4cfca634ee445ce20c38.png