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

在 Web 开发中，经常需要根据用户的选择动态地构建查询字符串，以便向服务器发送带有多个筛选条件的请求。这通常涉及到从表单或界面元素（如下拉菜单、复选框等）收集数据，并将这些数据转换为 URL 的一部分。以下是如何在 JavaScript 中使用多个筛选器来构建和追加查询字符串的步骤：

步骤 1: 准备 HTML 界面

假设你有一个简单的 HTML 表单，用户可以从中选择多个筛选条件：

<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>

步骤 2: 编写 JavaScript 以构建查询字符串

你可以使用 JavaScript 来监听表单的提交事件，收集所有的输入数据，然后构建查询字符串：

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)...
});

步骤 3: 使用 Fetch API 发送请求

一旦你构建了包含所有筛选条件的 URL，你可以使用 fetch() API 发送请求到服务器：

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