springmvc（springboot）前后端传参数组

最新推荐文章于 2024-03-05 21:18:20 发布
最新推荐文章于 2024-03-05 21:18:20 发布
阅读量2.4k 收藏
点赞数
分类专栏： spring java 文章标签： springboot 前后端传参 数组
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lexang1/article/details/106765892
版权
java 同时被 2 个专栏收录
46 篇文章 0 订阅
订阅专栏
spring
10 篇文章 0 订阅
订阅专栏

后台代码

   @RequestMapping(value = "/deleteByIds", method = RequestMethod.POST)
    public JzBaseResponse deleteByIds(List<Integer> ids) {
        menuService.deleteByIds(null);
        return JzBaseResponse.setOk("删除成功");
    }
    @RequestMapping(value = "/deleteByIds2", method = RequestMethod.POST)
    public JzBaseResponse deleteByIds2(@RequestBody  List<Integer> ids) {
        menuService.deleteByIds(null);
        return JzBaseResponse.setOk("删除成功");
    }
     @RequestMapping(value = "/deleteByIds3", method = RequestMethod.POST)
    public JzBaseResponse deleteByIds3(@RequestParam("ids") List<Integer> ids) {
        menuService.deleteByIds(null);
        return JzBaseResponse.setOk("删除成功");
    }
    @RequestMapping(value = "/deleteByIds4", method = RequestMethod.POST)
    public JzBaseResponse deleteByIds4(DeleteMenuRequest deleteMenuRequest) {
        menuService.deleteByIds(null);
        return JzBaseResponse.setOk("删除成功");
    }
    @RequestMapping(value = "/deleteByIds5", method = RequestMethod.POST)
    public JzBaseResponse deleteByIds5(@RequestBody DeleteMenuRequest deleteMenuRequest) {
        menuService.deleteByIds(null);
        return JzBaseResponse.setOk("删除成功");
    }
    @PostMapping(value = "/deleteByIds6")
    public JzBaseResponse deleteByIds6(Integer[] ids) {
        menuService.deleteByIds(null);
        return JzBaseResponse.setOk("删除成功");
    }
    @PostMapping(value = "/deleteByIds7")
    public JzBaseResponse deleteByIds7(@RequestParam(value="ids") Integer[] ids) {
        menuService.deleteByIds(null);
        return JzBaseResponse.setOk("删除成功");
    }
    @PostMapping(value = "/deleteByIds8")
    public JzBaseResponse deleteByIds8(@RequestBody Integer[] ids) {
        menuService.deleteByIds(null);
        return JzBaseResponse.setOk("删除成功");
    }

先测试第一种：&.post 不设置 $.ajaxSettings.traditional = true;

   $.post('menu/deleteByIds', {ids:  obj.ids}, function (res) {
        layer.close(loadIndex);
        if (res.code === 200) {
            layer.msg(res.msg, {icon: 1});
            insTb.refresh();
        } else {
            layer.msg(res.msg, {icon: 2});
        }
    });

    $.post('menu/deleteByIds2', {ids: obj.ids}, function (res) {
        layer.close(loadIndex);
        if (res.code === 200) {
            layer.msg(res.msg, {icon: 1});
            insTb.refresh();
        } else {
            layer.msg(res.msg, {icon: 2});
        }
    });


    $.post('menu/deleteByIds3', {ids: obj.ids}, function (res) {
        layer.close(loadIndex);
        if (res.code === 200) {
            layer.msg(res.msg, {icon: 1});
            insTb.refresh();
        } else {
            layer.msg(res.msg, {icon: 2});
        }
    });


    $.post('menu/deleteByIds4', {ids:  obj.ids}, function (res) {
        layer.close(loadIndex);
        if (res.code === 200) {
            layer.msg(res.msg, {icon: 1});
            insTb.refresh();
        } else {
            layer.msg(res.msg, {icon: 2});
        }
    });

    $.post('menu/deleteByIds5', {ids:  obj.ids}, function (res) {
        layer.close(loadIndex);
        if (res.code === 200) {
            layer.msg(res.msg, {icon: 1});
            insTb.refresh();
        } else {
            layer.msg(res.msg, {icon: 2});
        }
    });


    $.post('menu/deleteByIds6', {ids:  obj.ids}, function (res) {
        layer.close(loadIndex);
        if (res.code === 200) {
            layer.msg(res.msg, {icon: 1});
            insTb.refresh();
        } else {
            layer.msg(res.msg, {icon: 2});
        }
    });

    $.post('menu/deleteByIds7', {ids:  obj.ids}, function (res) {
        layer.close(loadIndex);
        if (res.code === 200) {
            layer.msg(res.msg, {icon: 1});
            insTb.refresh();
        } else {
            layer.msg(res.msg, {icon: 2});
        }
    });

    $.post('menu/deleteByIds8', {ids: obj.ids}, function (res) {
        layer.close(loadIndex);
        if (res.code === 200) {
            layer.msg(res.msg, {icon: 1});
            insTb.refresh();
        } else {
            layer.msg(res.msg, {icon: 2});
        }
    });

结果：

1：
request：
在这里插入图片描述
以下2，3，4，5，6，7，8的请求request都同1

response：
在这里插入图片描述
2： response：
在这里插入图片描述
3： response：
在这里插入图片描述
4： response：
在这里插入图片描述
5： response：
在这里插入图片描述
6： response：
在这里插入图片描述
7： response：
在这里插入图片描述

8： response：
在这里插入图片描述

结论：

后端加了@RequestBody的都需要传输json格式(2,5,8) 而&.post默认传输的不是json格式 而是application/x-www-form-urlencoded

第六个请求成功，但后端实际没接收到值：
在这里插入图片描述
其他也都接受不成功，这种方法没有一个成功的。

第二种：还是&.post 但设置 $.ajaxSettings.traditional = true;

                $.ajaxSettings.traditional = true;
                $.post('menu/deleteByIds', {ids:  obj.ids}, function (res) {
                    layer.close(loadIndex);
                    if (res.code === 200) {
                        layer.msg(res.msg, {icon: 1});
                        insTb.refresh();
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                });
                 $.post('menu/deleteByIds2', {ids:  obj.ids}, function (res) {
                    layer.close(loadIndex);
                    if (res.code === 200) {
                        layer.msg(res.msg, {icon: 1});
                        insTb.refresh();
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                });
                ------不在累述-----

结果：

1：
request：
在这里插入图片描述
以下2，3，4，5，6，7，8的请求request都同1
response：
在这里插入图片描述
2
在这里插入图片描述
3
在这里插入图片描述
4
在这里插入图片描述
5
在这里插入图片描述
6
在这里插入图片描述
7
在这里插入图片描述
8
在这里插入图片描述

结论

3，4，6，7成功
没加 $.ajaxSettings.traditional = true时 传输参数是ids[] 加了之后是ids
在这里插入图片描述
2，5，8后端以json格式接收，前端不设置默认是application/x-www-form-urlencoded 不成功

3，4，6，7成功了 但第一个没成功啊 ，看报错信息：{“data”:null,“code”:“9999”,“msg”:“No primary or default constructor found for interface java.util.List”,“ok”:false}
但第三个加个@RequestParam(value=“ids”) 成功了 或者第四个外加一层
后端list方式接受前端数组 ，Content-Type:为 application/x-www-form-urlencoded 需要@RequestParam 或者实体类封装一下数组
后端以数组接收（6，7） 加不加RequestParam都一样

第三种 $.ajax方式 传输application/json

. a j a x 方 式 传 输 a p p l i c a t i o n / x − w w w − f o r m − u r l e n c o d e d 同 .ajax方式 传输application/x-www-form-urlencoded 同 .ajax方式传输application/x−www−form−urlencoded同.post

           $.ajax({
                    type: 'POST',
                    data:obj.data ? JSON.stringify([obj.data.id]) : JSON.stringify(obj.ids),
                    contentType:"application/json",
                    url: 'menu/deleteByIds',
                    success: function (res) {
                        layer.close(loadIndex);
                        if (res.code === "0") {
                            layer.msg(res.msg, {icon: 1});
                            insTb.refresh();
                        } else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    }
                });
               $.ajax({
                    type: 'POST',
                    data:obj.data ? JSON.stringify([obj.data.id]) : JSON.stringify(obj.ids),
                    contentType:"application/json",
                    url: 'menu/deleteByIds2',
                    success: function (res) {
                        layer.close(loadIndex);
                        if (res.code === "0") {
                            layer.msg(res.msg, {icon: 1});
                            insTb.refresh();
                        } else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    }
                });
                ---后面几个只是deleteByIds加了序号 不在累述 ---

后端没加@RequestBody的肯定也请求不同，就算请求成功了，也获取不到数据 比如4 6
在这里插入图片描述
在这里插入图片描述
只看 2 5 8 第5个干的久的都知道 应该也不行

结果：

request：
2:
在这里插入图片描述
response
在这里插入图片描述
5:
在这里插入图片描述
8
在这里插入图片描述

结论

2 8 成功 5失败
已json格式传输，后端@RequestBody Integer[] 或者 @RequestBody List 都可以

第四种 $.ajax方式 传输Content-Type: multipart/form-data

           var formData= new FormData();
                if(obj.data){
                    formData.append('ids',obj.data.id)
                }else{
                    for(let k of obj.ids){
                        formData.append('ids',k)
                    }
                }
                $.ajax({
                    type: 'POST',
                    data: formData,
                    url: 'menu/deleteByIds',
                    processData: false,
                    contentType: false,
                    async: false,
                    success: function (res) {
                        layer.close(loadIndex);
                        if (res.code === "0") {
                            layer.msg(res.msg, {icon: 1});
                            insTb.refresh();
                        } else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    }
                });
                 $.ajax({
                    type: 'POST',
                    data: formData,
                    url: 'menu/deleteByIds2',
                    processData: false,
                    contentType: false,
                    async: false,
                    success: function (res) {
                        layer.close(loadIndex);
                        if (res.code === "0") {
                            layer.msg(res.msg, {icon: 1});
                            insTb.refresh();
                        } else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    }
                });

  	--------不在累述---------

结果：

request：
在这里插入图片描述
response
2 5 8 json排除
在这里插入图片描述
1
在这里插入图片描述
3 4 6 7成功 也获取到数据
在这里插入图片描述
1 不成功
在这里插入图片描述

结论

Content-Type: multipart/form-data和x-www-form-urlencoded结果一样
后端list方式接受前端数组 Content-Type:为 multipart/form-data 需要@RequestParam 或者实体类封装一下数组
后端以数组接收 加不加RequestParam都一样

综合结论

$.post  传输数组  默认x-www-form-urlencoded 需要设置$.ajaxSettings.traditional = true;
后端以Integer[]接收时加不加@RequestParam都可以  以List<Integer>接收时需要加@RequestParam
已封装类接受时不要加任何注解

$.ajax传输数组  默认x-www-form-urlencoded 需要设置$.ajaxSettings.traditional = true;
同$.pos

$.ajax传输数组  以json传输，可以@RequestBody Integer[] 或者@RequestBody List<Integer> ids


$.ajax传输数组 以multipart/form-data传输 结果同$.post的x-www-form-urlencoded

x-www-form-urlencoded需要设置$.ajaxSettings.traditional = true;
json和multipart/form-data不需要设置$.ajaxSettings.traditional = true;默认即可

不知道我总结的对不对啊 😂😂😂

补充：
前端以form提交： application/x-www-form-urlencoded

			    var checkRows =table.checkStatus('basicTable');
                var ids=[];
                if (checkRows.length !== 0) {
                    ids=checkRows.data.map(function (d) {
                        return d.id;
                    });
                }
                postExcelFile({ ids: ids},"/basic/exportDetail")
		function postExcelFile(params, url) {
            //params是post请求需要的参数，url是请求url地址
            var form = document.createElement("form");
            form.style.display = "none";
            form.action = url;
            form.method = "post";
            document.body.appendChild(form);
            // 动态创建input并给value赋值
            for (var key in params) {
                var input = document.createElement("input");
                input.type = "hidden";
                input.name = key;
                input.value = params[key];
                form.appendChild(input);
            }

            form.submit();
            form.remove();
        }

请求：
在这里插入图片描述

后端：

@PostMapping(value = "/exportDetail")
	public void exportDetail(@RequestParam(value = "ids") List<String>  ids) {
		basicService.exportDetail(ids);
	}

或者

@PostMapping(value = "/exportDetail")
	public void exportDetail(@RequestParam(value = "ids") String  ids) {
		basicService.exportDetail(ids);
	}
你是我的天晴
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
从SpringMVC迁移到Springboot的方法步骤
08-28
本篇文章主要介绍了从SpringMVC迁移到Springboot的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Spring boot 接收数组
热门推荐
温故而知新，可以为师矣。
11-06 6万+
记录后台接收数组 如果所有参数（包括数组）全部用一个实体类来接收，则不需要考虑前端数组的传参格式，他都能解析并封装到实体类里面。 这里的传参格式指： 后台用一个数组a来接收： Integer[] a; 前端传值是下面两种的其中一种，都是可以的： a=1&amp;amp;a=2 &amp;amp;a=3 或者 a[0]=1&amp;amp;a[1]=2&amp;amp;a[3]=3 但是，如果直接在controller用...
Springboot 接口需要接收参数类型是数组
默默不代表沉默
12-06 1万+
如题，一般我们普遍采用的协调方式： 多个参以“，”拼接传递即可 如： 那么除了这样，我们还能怎么协调呢？ 其实对应get请求，springmvc内部是已经支持了这种以“，”逗号拼接的方式，也就是说，传参方式不变，但是我们后台接收的时候，可以不用那么繁琐以逗号切割，可以这样： 对post请求除了可以要求传参以“，”逗号拼接，我们接口接到参后再切割，...
【JavaEE】_Spring MVC项目使用数组与集合传参
最新发布
m0_63299495的博客
03-05 990
注：注意返回语句的书写：如果写成 return "ArrayPara has received:\n"+ arrayPara;不止Chrome，postman也支持urlencode操作，在postman上构造这种类型的请求也可以成功发送并成功收到响应；构造该请求时，除了使用&连接的键值对作为query string部分进行多参数传递的方法外，【JavaEE】_前端使用GET请求的queryString向后端传参-CSDN博客。对于1.3 中提到的在同一个请求中传递多个名称相同的参数的问题，
mars-validated:简单好用的 springmvc springboot springcloud dubbo 参数校验
05-21
mars-validated springmvc springboot springcloud dubbo 参数校验 简单好用的 springmvc springboot springcloud dubbo 参数校验 validated 是 控制 springmvc springboot 的验证框架。此框架基于spring 开发。 版本 新增功能 1.0.0 1、参数验证基本功能上线 1.0.1 1、新增验证注解 2、Validated 注解增加validClass方法，可以选择性验证自己想要的参数。 3、新增Default 注解 1.0.2 1、代码逻辑优化。2、新增groups 功能，可以根据groups 选择性验证 1.0.3 1、Constraint 接口增加  validatedByBean 方法，用来自定义注解实现 2、新增国际化支持 EnableValidatedCo
springmvc转为springboot--干货.docx
08-09
在网上找了很多springmvc转springboot的案例，大多都说的不全。 根据原springmvc项目（ssm+jsp）转换为springboot项目，爬了高很多坑，整理成此文档，希望对大家有所帮助。
springboot后端接收前端传数组参数方法
qq_19891197的博客
02-11 4591
springboot后端接收前端传数组参数方法
Springboot传参详解
编程界明世隐的博客
12-11 1万+
对Spring Boot框架的Controller层接收前端传递过来的各种类型的数据，常用的几种接收方式进行总结和讲解。 使用postman配合测试，对RequestParam、RequestBody、PathVariable、HttpServletRequest等方式一个个的演示，非常适合新手！
springboot参数配置
rzpy_qifengxiaoyue的博客
07-12 1400
全局配置文件 application.properties 配置文件 先准备两个pojo实体类Pet和Person @Component//用于将Person类作为Bean注入到spring容器中 @ConfigurationProperties(prefix = "person") //将配置文件中以person开头的属性注入到该类中 public class Person { private int id; //id private String nam
SpringBoot 如何从前台传递数组
adu521525的博客
04-18 1193
1.SpringBoot 如何从前台传递数组 2、前台 $.ajax({ url: 'deleteBsGiftById', type: 'post', dataType: 'json', ...
SpringBoot多种参数传递总结
qq_57390446的博客
11-14 5050
现在我们知道了，集合和数组是会被SpringBoot封装成JSON数组的，而Java对象是被封装成JSON对象的。
springmvc 传递和接收数组参数的实例
08-27
下面小编就为大家分享一篇springmvc 传递和接收数组参数的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
java 企业官网 前后端 springMVC 保证运行
11-04
java 企业官网 前后端 springMVC 保证运行，带完整数据库和代码。运行之后展示端访问路径http://localhost:8080/enterprise/index，管理端访问路径http://localhost:8080/enterprise/manage/user/home,后续修改展示模板
Springmvc和ajax如何实现前后端交互
08-19
主要介绍了Springmvc和ajax如何实现前后端交互,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
java io 层次结构图 io详解
你是我的天晴
08-28 9275
Java中IO结构总图Java 流在处理上分为字符流和字节流。字符流处理的单元为 2 个字节的 Unicode 字符，分别操作字符、字符数组或字符串，而字节流处理单元为 1 个字节，操作字节和字节数组。 Java 内用 Unicode 编码存储字符，字符流处理类负责将外部的其他编码的字符流和 java 内 Unicode 字符流之间的转换。而类 InputStreamReader 和 Output
Java中Filter、Listener，拦截器的学习，listener、 filter、servlet 加载顺序及其详解
你是我的天晴
08-17 6732
Filter filter可认为是Servlet的一种“变种”，它主要用于对用户请求进行预处理，也可以对HttpServletResponse进行后处理，是个典型的处理链。它与Servlet的区别在于：它不能直接向用户生成响应。完整的流程是：Filter对用户请求进行预处理，接着将请求交给Servlet进行处理并生成响应，最后Filter再对服务器响应进行后处理。 Filter有如下几个用
mysql 创建表不能使用“事务”回滚
你是我的天晴
10-14 5460
需求：由于当初设计，往“项目表”中添加一条数据，就分别要创建“样本表”和“结果表”。   我当初的想法就是希望上面一连串的动作就是一个事物，如果只要是出现了异常，结果就是插入数据库不成功，并且创建数据库失败，但是测试了两天，使用了spring事务的很多种方式，还是不行，但是只要不创建数据库就没有任何问题，因此怀疑就是创建表实际上是不支持事务的。   那么上面的需求怎么解决呢？ 解决办法：
mysql中采用concat来拼接中文字符乱码解决方式
你是我的天晴
09-15 3480
mysql concat乱码问题解决 concat(str1,str2) 当concat结果集出现乱码时，大都是由于连接的字段类型不同导致， 如concat中的字段参数一个是varchar类型，一个是int类型或doule类型，就会出现乱码。 解决方法：利用mysql的字符串转换函数CONVERT将参数格式化为char类型就可以了。 举例： concat('数量:',CONVERT(int...
spring拿到WebApplicationContext，获取bean
你是我的天晴
08-17 3263
创建listenerServletContextListener获取WebApplicationContext，创建WebContext setcontext  getBean public class StartListener implements ServletContextListener { public void contextInitialized(ServletCont
springmvc springboot
06-06
Spring Boot还提供了一组开箱即用的功能，如嵌入式Web服务器、健康检查、度量、安全性等。 总的来说，Spring MVC适用于需要更多控制和自定义的Web应用程序，而Spring Boot适用于快速构建和部署Web应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值