首先为了解决这个bug测试了几十遍,不断的重启测试,最终,终于找到了解决方案

  1. 使用最笨的方法,将数组里面的值,在循环里拼接在URL后面

  2. 第二种方法就是使用QS

第一种这里就不说了,大家自行去测试即可,这里主要收一下第二种方法,因为看了很多网上的方案,都说的很含糊,导致会产生很多bug

  • 首先可以在自己的vue项目里安装QS(也可以不用安装,有些库它自带,如果怕出现问题最好还是安装i一下)

  • 安装:npm install qs 即可

  • 然后在组件页面的<script>标签里导入即可,import QS from 'qs',也可以在main.js里导入(全局导入)

希望大家测试的时候先跟我写的一模一样,成功后再修改自行去测试,避免走弯路!!!

这里提供一下后台的接口

     @RequestMapping("/delete")
     @ResponseBody
     public String deleteById(@RequestParam(value = "id[]") Integer[] id) {
         System.out.println(id.length);
         String str = "";
         for (Integer integer : id) {
             str += integer;
         }
         return str;
     }

这里只是简单的接受数组,然后返回给前端看能不能接收,一般我们用来做批量删除

注意形参列表,务必要写成

@RequestParam(value = "id[]") Integer[] id

前端请求

 this.axios({
         method: "post",
         url: "http://localhost:8081/delete",
         data: QS.stringify({'id': [1, 2, 3, 4]}, {arrayFormat: 'brackets'})
       }).then(resp => {
         alert(resp.data);
       });

注意:请求方式必须是 post

大功告成!!!

补充:

arrayFormat的取值有三种:brackets,repeat,indices

indices:解析后 -> id[0]=1 & id[1]=2 & id[2]=3

brackets:解析后 -> id[]=1 & aid[]=2 & id[]=3

repeat:解析后 -> id=1 & id=2 & id=3

对于参数匹配后端接口方式,请参考:qs的arrayFormat与SpringBoot接收数组问题_蚍蜉叹的博客-CSDN博客

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐