前后端传参（二）之数组对象

心已赠人 2023-03-13 03:53 8阅读 0赞

## 前言 ##

-简单数组请前往：[https://blog.csdn.net/shuai8624/article/details/106026325](https://blog.csdn.net/shuai8624/article/details/106026325)
          -本节总结数组对象 如 let array=[{"id":1,"name":"张一"},{"id":2,"name":"张二"},{"id":3,"name":"张三"}];

### 一. 示例采用的技术 ###

前端： jquery, ajax请求（axios应该也差不多，自己看着玩）  
后端： SpringBoot

### 二. 直接上才艺 ###

目前总结了2种方式，各位大佬给补充下吧：

##### 1）前端转JSON字符串，后端String接口，json解析成Java对象 #####

前端：

//方式一：转成json字符串, 后端接口string去接收，然后再转成JSON数组处理
    //contentType为默认值，即 application/x-www-form-urlencoded
    function array1() { 
    	let array=[{ "id":1,"name":"张一"},{ "id":2,"name":"张二"},{ "id":3,"name":"张三"}];
    	$.ajax({ 
    		url: "http://localhost:8080/array1",
    		data: { 
    			"userList": JSON.stringify(array)
    		},
    		type: "post",
    		success: function (data) { 
    			alert(data)
    		},
    	})
    };

后端接口：（json字符串转对象的逻辑自己写）

@RequestMapping("/array1")
        public String array1(String userList) { 
            return userList;
        }

##### 2）前端整个data直接传 json字符串，后台接口用@RequestBody List ids 接收 #####

前端

//方式二： 前端整个data直接传 json字符串，后台接口用@RequestBody List<Integer> ids 接收
    //contentType必须值为： "application/json"
    function list1() { 
    	let array=[{ "id":1,"name":"张一"},{ "id":2,"name":"张二"},{ "id":3,"name":"张三"}];
    	$.ajax({ 
    		url: "http://localhost:8080/list2",
    		data: JSON.stringify(array),
    		type: "post",
    		dataType: "json",
    		contentType:"application/json",
    		success: function (data) { 
    			alert(data)
    		},
    	})
    };

后端： List或者数组去接收都可以

@RequestMapping("/list1")
        public Integer list1(@RequestBody List<User> user) { 
            return user.size();
        }
        //或者
        @RequestMapping("/list2")
        public Integer list2(@RequestBody User[] user) { 
            return user.length;
        }

### 三. 注意 ###

1、contentType别传错了，示例中没传的，使用的是默认值：application/x-www-form-urlencoded  
2、如果遇到别的问题或者别的解决方法，可以联系我一下，做个补充