Lake's Blog Lake's Blog
首页
HCFrame
  • 博客搭建

    • 搜索引擎
    • SEO优化
    • 问题记录
  • Vue

    • 问题记录
  • uni-app
  • 开发

    • Spring
  • 数据库及中间件

    • Elasticsearch
    • SQL
  • 杂谈

    • 杂谈
  • 微服务

    • nacos
    • CAS
  • 算法说明

    • algorithm
  • leetCode

    • leetCode
  • 代理

    • Nginx
  • Linux

    • ubuntu
  • Docker
  • 数据库
  • 消息队列
  • openwrt
  • 友情链接
关于
  • 网站
  • 资源
  • 分类
  • 标签
  • 归档
GitHub

Lake Liu

很菜的程序员
首页
HCFrame
  • 博客搭建

    • 搜索引擎
    • SEO优化
    • 问题记录
  • Vue

    • 问题记录
  • uni-app
  • 开发

    • Spring
  • 数据库及中间件

    • Elasticsearch
    • SQL
  • 杂谈

    • 杂谈
  • 微服务

    • nacos
    • CAS
  • 算法说明

    • algorithm
  • leetCode

    • leetCode
  • 代理

    • Nginx
  • Linux

    • ubuntu
  • Docker
  • 数据库
  • 消息队列
  • openwrt
  • 友情链接
关于
  • 网站
  • 资源
  • 分类
  • 标签
  • 归档
GitHub
  • 博客搭建

  • VUE

    • 问题记录

      • 前端传值不能带中括号???
        • 解决方案
        • 问题分析
        • 大功告成
      • Vue中使用debounce防抖基于Typescript
      • Vue-typescript项目兼容IE浏览器
      • Vue-typescript Long类型失去精度
      • Vue-typescript 打包成app后如何自动更新
      • Vue typescript 如何极限压缩编译静态资源
  • UNIAPP

前端传值不能带中括号???

# 前端传值不能带中括号???

前端通过Get方式传值,不能携带[]

# 解决方案

将前端传值通过enencodeURI()进行转义,后台部分需要通过 URLDecoder.decode()进行解析

  • 修改前:
let arr:any = [
    {name:'tome',age:18},
    {name:'lake',age:18}
]
let param:any = {
	data: JSON.stringify(arr)
}
1
2
3
4
5
6
7
  • 修改后:

前端部分:

let arr:any = [
    {name:'tome',age:18},
    {name:'lake',age:18}
]
let param:any = {
	data: enencodeURI(JSON.stringify(arr))
}
1
2
3
4
5
6
7

后台部分:

@GetMapping("/a")
public ResultVO get(String data) {
    data = URLDecoder.decode(data, "UTF-8");
	return ResultVO.getSuccess(tableService.get(data));
}
1
2
3
4
5

# 问题分析

在开发过程中,突然遇到这个问题,发现前端传报400状态码的错误

unnamed

然后开始排查传值,发现在url中多了一对 []

去掉后,就可以正常访问到后台

于是怀疑是需要转义

最终,通过enencodeURI()转义后

后台成功取到数据

# 大功告成

OK,那么我们通过上述方式解决了此类问题,在此也算记录一下。

编辑
#前端#Vue
上次更新: 2023/03/24, 08:53:10
Vue或VuePress添加不蒜子统计
Vue中使用debounce防抖基于Typescript

← Vue或VuePress添加不蒜子统计 Vue中使用debounce防抖基于Typescript→

最近更新
01
IDEA行号太宽
03-11
02
uniapp中实现h5扫码功能(微信版)
08-12
03
Docker安装Rabbitmq
07-22
更多文章>
本站总访问量次 | 您是本站第位访问者
Theme by Vdoing | Copyright © 2020-2024 Lake Liu | MIT License | 背景图、Logo、头像设计@Drrizzee
  • 跟随系统
  • 深色模式
  • 浅色模式
  • 阅读模式