我在报表中设置了一个类型为字符串数组的参数,并把它作为默认值给了一下多选下拉框。
请问我如何传递url数组参数才能被多选下拉框正确识别为多个选项?
我尝试了了如下方法:
kemu=交通费,管理交通费
kemu=交通费&kemu=管理交通费
kemu[0]=交通费&kemu[1]=管理交通费
kemu=["交通费","管理交通费"]
均不能正常识别,例如kemu=["交通费","管理交通费"]会把["交通费","管理交通费"]作为选项整体
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。
对于大多数后端框架(如 Spring Boot、Express.js 等),传递数组参数的正确格式是:
kemu=交通费&kemu=管理交通费
这种方式会将 kemu 解析为一个数组,包含两个元素:["交通费", "管理交通费"]。
前端
如果你使用的是 HTML 表单或 JavaScript,确保你的代码能够正确生成这样的 URL。例如,如果你使用的是 JavaScript,可以这样生成 URL:
let params = new URLSearchParams();
params.append('kemu', '交通费');
params.append('kemu', '管理交通费');
let url = `your-endpoint?${params.toString()}`;
console.log(url); // 输出: your-endpoint?kemu=交通费&kemu=管理交通费
后端
后端框架通常会自动将这种格式的参数解析为数组。例如,在 Spring Boot 中:
@GetMapping("/your-endpoint")
public String handleRequest(@RequestParam List<String> kemu) {
System.out.println(kemu); // 输出: [交通费, 管理交通费]
return "success";
}
在 Express.js 中:
app.get('/your-endpoint', (req, res) => {
console.log(req.query.kemu); // 输出: [ '交通费', '管理交通费' ]
res.send('success');
});
使用 JSON 格式
如果后端支持接收 JSON 格式的参数,可以将数组转换为 JSON 字符串,然后传递:
let params = new URLSearchParams();
params.append('kemu', JSON.stringify(["交通费", "管理交通费"]));
let url = `your-endpoint?${params.toString()}`;
console.log(url); // 输出: your-endpoint?kemu=["交通费","管理交通费"]
使用 Base64 编码
如果你的报表工具或框架确实无法正确处理数组参数,可以考虑将数组转换为 Base64 编码的字符串,然后传递:
let kemuArray = ["交通费", "管理交通费"];
let kemuBase64 = btoa(JSON.stringify(kemuArray));
let url = `your-endpoint?kemu=${kemuBase64}`;
console.log(url); // 输出: your-endpoint?kemu=W3sidmFsdWUiOiLku4bku4Hku4Xku4Xku4Hku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku4Xku