使用多个筛选器追加查询字符串

<form id="filterForm">
  <select name="category">
    <option value="">Select Category</option>
    <option value="books">Books</option>
    <option value="electronics">Electronics</option>
  </select>

  <input type="checkbox" name="in_stock" value="1"> In Stock

  <input type="text" name="search" placeholder="Search...">

  <button type="submit">Apply Filters</button>
</form>

document.getElementById('filterForm').addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单的默认提交行为

  const form = event.target;
  const formData = new FormData(form);
  const queryParams = new URLSearchParams();

  for (const [key, value] of formData) {
    if (value.trim() !== '') { // 确保不添加空字符串
      queryParams.append(key, value);
    }
  }

  // 构建最终的 URL
  const baseUrl = 'https://example.com/products';
  const finalUrl = `${baseUrl}?${queryParams.toString()}`;

  console.log(finalUrl); // 你可以在这里替换为实际的请求代码
  // 例如使用 fetch() 发送请求
  // fetch(finalUrl)...
});

fetch(finalUrl)
  .then(response => response.json())
  .then(data => {
    console.log(data); // 处理响应数据
  })
  .catch(error => {
    console.error('Error:', error);
  });