Vue中GET请求如何正确传递数组参数？-html教程-PHP中文网

Vue中GET请求如何正确传递数组参数？

DDD

发布： 2025-02-27 09:00:14

原创

516人浏览过

Vue中GET请求如何正确传递数组参数？

vue.js get请求中正确传递数组参数

在使用Vue.js和axios进行GET请求时，直接传递数组参数可能会导致java.lang.IllegalArgumentException: Invalid character found in the request target异常。这是因为GET请求参数直接拼接在URL中，而数组格式不符合URL规范。本文将演示如何正确处理这种情况。

问题：

前端使用axios.get向后端/searchRoomTags接口发送GET请求，roomTags参数为数组。后端使用Spring Boot，使用@RequestParam String[] roomTags接收参数。直接传递数组导致请求解析失败。

错误代码（前端）：

立即学习“前端免费学习笔记（深入）”；

this.$axios
    .get('/searchRoomTags', {
      params: {
        pageSize: this.roomPageInfo.pageSize,
        roomType: encodeURI(this.roomForm.roomType),
        roomTags: this.searchRoomTags, // 直接传递数组
        roomState: this.searchContent
      }
    })
    // ...

登录后复制

错误代码（后端）：

@GetMapping("/searchRoomTags")
public PageInfo<rooms> searchRoomTags(@RequestParam String[] roomTags, Rooms room, HttpServletRequest request) {
    // ...
}

登录后复制

解决方案：

将前端数组参数转换为以特定分隔符连接的字符串，后端再进行分割还原。

修改后的前端代码：

this.$axios
    .get('/searchRoomTags', {
      params: {
        pageSize: this.roomPageInfo.pageSize,
        roomType: encodeURI(this.roomForm.roomType),
        roomTags: (this.searchRoomTags || []).join(','), // 使用逗号分隔
        roomState: this.searchContent
      }
    })
    // ...

登录后复制

修改后的后端代码：

@GetMapping("/searchRoomTags")
public PageInfo<rooms> searchRoomTags(@RequestParam String roomTags, Rooms room, HttpServletRequest request) {
    String[] tagsArray = roomTags.split(","); // 使用逗号分割字符串
    // ... 使用 tagsArray
}

登录后复制

此方案将roomTags数组转换为逗号分隔的字符串。后端接收字符串参数，再用逗号分割成数组。选择的分隔符（这里用逗号）必须确保不会出现在数组元素中，否则需要选择其他分隔符，并前后端保持一致。如果数组元素可能包含逗号，建议使用URL编码对元素进行编码后再拼接。

通过以上修改，可以确保GET请求中数组参数的正确传递，避免java.lang.IllegalArgumentException异常。记住，前后端的分隔符必须一致。

以上就是Vue中GET请求如何正确传递数组参数？的详细内容，更多请关注php中文网其它相关文章！