前后端联调之Form表单提交数组

青旅半醒 2022-04-22 21:58 242阅读 0赞

**案例：**  
后端以`Form`表单的`Content-type`形式接收`Integer`数组，接口和前端代码如下，前后端联调时，后端接收不到前端传递的参数

接口：	@ResponseBody
       		@RequestMapping("/testIntegerArray")
    		public Object o(Integer[] ids){ return "" }
    		
    前端：	var ids = new Array(1,2,3);
    		$.ajax({
    		    type:"post",
    		    url:"testIntegerArray",
    		    // data:{"ids":ids}, 请求状态为500
    		    // data:{"ids[]":ids}, 请求状态为500
    		    success:function(data){
    		    }
    		});

**解决方案一：**  
前端将数组转成以逗号分隔的字符串，将字符串作为参数传递，`Spring`可以识别前端传递的参数，并且赋值到数组中

接口不变：
    		@ResponseBody
       		@RequestMapping("/testIntegerArray")
    		public Object o(Integer[] ids){ return "" }
    		
    前端：	var ids = new Array(1,2,3);
    		var idStr = ids.join();
    		$.ajax({
    		    type:"post",
    		    url:"testIntegerArray",
    		    data:{"ids":idStr}, 
    		    success:function(data){
    		    }
    		});

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMDM4MTEx_size_16_color_FFFFFF_t_70]

**解决方案二：**

后端开发人员在接口的参数前使用`@RequestParam`注解，指定后端参数匹配前端参数的名称

接口使用 @RequestParam 注解：
    		@ResponseBody
       		@RequestMapping("/testIntegerArray")
    		public Object o(@RequestParam("ids") Integer[] ids){ return "" }
    
    前端不变：	var ids = new Array(1,2,3);
    		$.ajax({
    		    type:"post",
    		    url:"testIntegerArray",
    		    data:{"ids":ids}, 
    		    success:function(data){
    		    }
    		});

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMDM4MTEx_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMDM4MTEx_size_16_color_FFFFFF_t_70]: /images/20220327/2181379a77ac472484f4a9e846a444ae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMDM4MTEx_size_16_color_FFFFFF_t_70 1]: /images/20220327/aeb5554ca99c4ee5a71f489c9e126ffe.png