Vue向后台传数组数据,springboot接收vue传的数组数据

用axios前台代码:

 let menus_id = this.$refs.tree.getCheckedKeys(); //菜单id [1,2,3]数组
                this.$axios.get("/api/epidemic/roleMenus/addBath1",{params:{roleid:this.roleid,menusid:menus_id}}).then((result)=>{
                      console.log(result)
                })

后台代码:

@RequestMapping("/addBath1")
	public ResponseObj addBath1(Integer roleid,@RequestParam(value="menusid",required=false) Integer[] menusid) {
		//处理代码。。。。。。。
		return responseObj;
	}

前台报错:

xhr.js?ec6c:178 GET http://localhost:8080/api/epidemic/roleMenus/addBath1?roleid=2&menusid[]=1&menusid[]=101&menusid[]=102&menusid[]=103&menusid[]=104&menusid[]=2&menusid[]=201&menusid[]=202&menusid[]=203&menusid[]=3&menusid[]=301&menusid[]=302&menusid[]=303&menusid[]=304&menusid[]=4&menusid[]=401&menusid[]=402&menusid[]=403&menusid[]=404 400 (Bad Request)
dispatchXhrRequest @ xhr.js?ec6c:178
xhrAdapter @ xhr.js?ec6c:12
dispatchRequest @ dispatchRequest.js?c4bb:52
Promise.then (async)
request @ Axios.js?5e65:61
Axios.<computed> @ Axios.js?5e65:76
wrap @ bind.js?24ff:9
updRoleMenus @ AuthList.vue?e7ca:131
invokeWithErrorHandling @ vue.esm.js?efeb:1863
invoker @ vue.esm.js?efeb:2188
invokeWithErrorHandling @ vue.esm.js?efeb:1863
Vue.$emit @ vue.esm.js?efeb:3897
handleClick @ element-ui.common.js?ccbf:9417
invokeWithErrorHandling @ vue.esm.js?efeb:1863
invoker @ vue.esm.js?efeb:2188
original._wrapper @ vue.esm.js?efeb:7565
createError.js?16d0:16 Uncaught (in promise) Error: Request failed with status code 400
    at createError (createError.js?16d0:16)
    at settle (settle.js?db52:17)
    at XMLHttpRequest.handleLoad (xhr.js?ec6c:61)

在这里插入图片描述
百度到后台改为:

@RequestMapping("/addBath1")
	public ResponseObj addBath1(Integer roleid,@RequestParam(value="menusid[]",required=false) Integer[] menusid) {
		//、、、、、、、、
		return responseObj;
	}

请求前台依然报错,这次后台也报错:

java.lang.IllegalArgumentException: Invalid character found in the request target [/epidemic/roleMenus/addBath1?roleid=2&menusid[]=1&menusid[]=101&menusid[]=102&menusid[]=103&menusid[]=104&menusid[]=2&menusid[]=201&menusid[]=202&menusid[]=203&menusid[]=3&menusid[]=301&menusid[]=302&menusid[]=303&menusid[]=304&menusid[]=4&menusid[]=401&menusid[]=402&menusid[]=403&menusid[]=404]. The valid characters are defined in RFC 7230 and RFC 3986
	at org.apache.coyote.http11.Http11InputBuffer.parseRequestLine(Http11InputBuffer.java:491) ~[tomcat-embed-core-9.0.36.jar:9.0.36]
	at org.apache.coyote.http11.Http11Processor.service(Http11Processor.java:260) ~[tomcat-embed-core-9.0.36.jar:9.0.36]
	at org.apache.coyote.AbstractProcessorLight.process(AbstractProcessorLight.java:65) [tomcat-embed-core-9.0.36.jar:9.0.36]
	at org.apache.coyote.AbstractProtocol$ConnectionHandler.process(AbstractProtocol.java:868) [tomcat-embed-core-9.0.36.jar:9.0.36]
	at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1590) [tomcat-embed-core-9.0.36.jar:9.0.36]
	at org.apache.tomcat.util.net.SocketProcessorBase.run(SocketProcessorBase.java:49) [tomcat-embed-core-9.0.36.jar:9.0.36]
	at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142) [na:1.8.0_121]
	at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617) [na:1.8.0_121]
	at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61) [tomcat-embed-core-9.0.36.jar:9.0.36]
	at java.lang.Thread.run(Thread.java:745) [na:1.8.0_121]

在这里插入图片描述
后来试了百度的一堆操作,依然没解决,貌似tocmat版本太高?不清楚
最后百般尝试,前台用路径传参:
解决办法:
前台vue传参代码:

 let menus_id = this.$refs.tree.getCheckedKeys(); //菜单id [1,2,3]数组

 this.$axios.get("/api/epidemic/roleMenus/addBath1?roleid="+this.roleid+"&menusid="+menus_id).then((result)=>{
           console.log(result)
           }).catch((err)=>{
               console.log("---出错---!"+err.message)
           })
       },

后台接收:

@RequestMapping("/addBath1")
	public ResponseObj addBath1(Integer roleid,@RequestParam(value="menusid",required=false) Integer[] menusid) {
		//处理代码。。。。。。。
		return responseObj;
	}

通过这样路径传参结果解决问题。。。。

  • 9
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue 中向 Spring Boot 发送数组数据,你可以使用 axios 库发送 HTTP 请求,并将数组数据作为请求体进行发送。以下是一个示例: ```javascript import axios from 'axios'; // 定义要发送的数组数据 const arrayData = [1, 2, 3, 4, 5]; // 发送数组数据到后端 axios.post('/api/endpoint', arrayData) .then(response => { // 请求成功处理逻辑 console.log(response.data); }) .catch(error => { // 请求失败处理逻辑 console.error(error); }); ``` 在上述示例中,我们使用 axios 的 `post` 方法向后端发送 POST 请求,第一个参数是请求的 URL,第二个参数是要发送的数组数据 `arrayData`。后端可以通过接收请求体中的数据获取数组数据。 在 Spring Boot 中,你可以使用 `@RequestBody` 注解将请求体中的数据绑定到方法参数上。示例如下: ```java @RestController @RequestMapping("/api") public class MyController { @PostMapping("/endpoint") public void handleArrayData(@RequestBody List<Integer> arrayData) { // 处理数组数据的逻辑 System.out.println(arrayData); } } ``` 上述示例中,我们使用 `@PostMapping` 注解来处理 POST 请求,并将请求体中的数据绑定到方法参数 `arrayData` 上。在方法体内,你可以对数组数据进行相应的处理。 请确保后端接口的请求路径和请求方法与前端代码中的请求路径和请求方法一致。 希望以上信息能够帮助到你!如果还有其他问题,请随时提问。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

成年人的苦衷

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值