2023-04-03 vue get请求传数组

GET请求直接传数组给后端,格式会错误,如下所示:


image.png

这样传的数组格式显然后端解析不了,后端希望的格式要么是list=1&list=2&list=3,要么是list=1,2,3

我们就来list = 1,2,3
1.手动转换
定义转换方法:

    converToUrl(requestParams){
      let params = [];
      Object.entries(requestParams).forEach(([key, value]) => {
        let param = value;
        params.push(param);
      });
      return  params.join('&');
    },

使用方式如下:
 let param = { ids: [1,2,3,4] };
 var converParam = this.converToUrl(param);


使用方法

if(this.listForm.normalFlagList){
          let param = { normalFlagList: this.listForm.normalFlagList };
          var converParam = this.converToUrl(param);
          if(converParam && param){
            this.listQuery.normalFlagList = converParam
          }
        }
        console.log('导出参数: ', converParam);

通过qs插件

// 在项目中使用命令行工具输入
npm install qs
// 引入qs插件
import qs from 'qs'

使用方式如下:


 let param = { ids: [1,2,3,4] };
 var converParam = qs.stringify(param, { arrayFormat: 'repeat' });

在URL链接后面加上一个?即可

api.url + '?' + converParam

后端直接通过如下方式接收即可:

    @GetMapping("/delete")
    @ApiOperation("删除")
    public CommonResult<Boolean> delete(@RequestParam("ids") List<Long> ids) {
        return success(true);
    }

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容