GET方法HTML表单数组参数生成异常问题咨询

1. URL中为何会出现%5B%5D，能否将其去除？ #

%5B%5D是方括号[]的URL编码（[对应%5B，]对应%5D），出现这个是因为你表单里的输入框name属性写的是cars[]，浏览器提交表单时会把名称里的特殊字符做URL编码，就产生了这个串。

要去除很简单：把所有<input>的name从cars[]改成cars就行。但要注意，如果你的后端框架（比如PHP）是依赖[]来识别这是一个数组参数的，直接改名称可能导致后端只能接收到最后一个汽车品牌的值，这时候得让后端同步调整参数接收逻辑。

2. 为何cars参数重复出现，能否改为?cars=saab,honda,toyota的格式？ #

cars参数重复是HTML GET表单的默认行为——多个同名的表单控件，提交时会逐个把参数拼到URL里。

纯HTML没法直接改成逗号分隔的格式，得用JavaScript拦截表单提交并手动处理：

• 给表单加onsubmit事件，先阻止默认的提交动作；
• 遍历所有目标输入框，收集它们的value值；
• 把收集到的值用逗号拼接成一个字符串；
• 构造新的URL，跳转到该地址。

举个简单的实现代码：

<form action="/search/" method="get" role="search" onsubmit="handleSubmit(event)">
    <input name="cars" value="saab">
    <input name="cars" value="honda">
    <input name="cars" value="toyota">
    <input type="submit" value="submit">
</form>

<script>
function handleSubmit(e) {
    e.preventDefault(); // 阻止默认提交
    const form = e.target;
    const carInputs = form.querySelectorAll('input[name="cars"]');
    const carValues = Array.from(carInputs).map(input => input.value);
    const carsStr = carValues.join(',');
    const url = `${form.action}?cars=${encodeURIComponent(carsStr)}`;
    window.location.href = url;
}
</script>

内容的提问来源于stack exchange，提问作者odedta