如何在网页中根据用户搜索条件生成带参数的搜索链接？

最简单的无JS方案 #

直接修改表单的两个属性就能实现需求，完全不需要写JavaScript：

• 把表单的method从POST改成GET
• 把action改成"/bookings/search"（去掉末尾的?，浏览器会自动处理参数拼接）

修改后的表单代码示例：

<form method="GET" action="/bookings/search">
  <input type="text" name="email" placeholder="Email">
  <input type="number" name="numTickets" placeholder="Number of Tickets">
  <button type="submit">搜索</button>
</form>

这样用户提交时，浏览器会自动把表单字段值拼接到URL后，生成你需要的/bookings/search?email=atom&numTickets=2格式。

需要自定义逻辑的JS方案 #

如果必须通过JavaScript控制（比如要先做输入验证、参数过滤等），可以用以下代码拦截表单提交，手动构造URL跳转：

<form id="searchForm" method="POST" action="/bookings/search?">
  <input type="text" name="email" placeholder="Email">
  <input type="number" name="numTickets" placeholder="Number of Tickets">
  <button type="submit">搜索</button>
</form>

<script>
const searchForm = document.getElementById('searchForm');

searchForm.addEventListener('submit', function(e) {
  // 阻止表单默认的POST提交行为
  e.preventDefault();
  
  // 获取输入框的值并去除首尾空格
  const emailVal = this.querySelector('[name="email"]').value.trim();
  const ticketVal = this.querySelector('[name="numTickets"]').value.trim();
  
  // 用URLSearchParams安全拼接参数（自动处理特殊字符编码）
  const queryParams = new URLSearchParams();
  if (emailVal) queryParams.append('email', emailVal);
  if (ticketVal) queryParams.append('numTickets', ticketVal);
  
  // 构造目标URL并跳转
  const targetUrl = `/bookings/search?${queryParams.toString()}`;
  window.location.href = targetUrl;
});
</script>

这段代码的逻辑：

1. 拦截表单默认提交行为，避免发送POST请求
2. 收集并清理输入值，空值不会被拼入参数
3. 用URLSearchParams处理参数拼接，避免手动拼接字符串的编码问题
4. 跳转到构造好的URL，触发GET请求

⚠️ 注意：如果后端/bookings/search接口原本只支持POST，需要同步修改后端逻辑支持GET请求，否则会报错。

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