如何通过 JavaScript 实现干净的 GET 表单提交（跳过空字段）

立即学习“Java免费学习笔记（深入）”；

✅ 核心思路：拦截 + 重构 + 导航

我们利用表单的 submit 事件拦截默认提交行为，用 FormData 高保真读取当前表单状态，再通过 URLSearchParams 构建精简查询字符串，最后通过 window.location.href 触发一次标准的 GET 页面跳转。整个过程仍属于“正常表单提交”语义（非 AJAX），保留页面刷新、历史记录、书签兼容性等关键特性。

? 示例代码（完整可运行）

<form id="advanced-search-form" action="/search/advanced_search" method="GET">
  <div class="left clearfix">
    <div class="input-field">
      <label for="given-name">First Name:</label>
      <input id="given-name" name="givenName" tabindex="1">
    </div>
    <div class="input-field">
      <label for="sn">Last Name:</label>
      <input id="sn" name="sn" tabindex="2">
    </div>
    <div class="input-field">
      <label for="tel-number">Extension:</label>
      <input type="tel" id="tel-number" name="telephoneNumber" tabindex="3">
    </div>
  </div>
  <div class="right clearfix">
    <div class="input-field">
      <label for="category">Category:</label>
      <select id="category" name="personType" tabindex="4">
        <option value="">Choose One:</option>
        <option value="staff">Staff</option>
        <option value="student">Student</option>
      </select>
    </div>
    <div class="input-field">
      <label for="building">Building:</label>
      <input id="building" name="physicalDeliveryOfficeName" tabindex="5">
    </div>
    <div class="input-field">
      <label for="dept">Department:</label>
      <input id="dept" name="department" tabindex="6">
    </div>
    <div class="submit-button">
      <input type="submit" value="Submit Search" tabindex="7">
    </div>
  </div>
</form>

<script>
  const form = document.querySelector('#advanced-search-form');

  form.addEventListener('submit', function (e) {
    e.preventDefault(); // 阻止默认提交

    const formData = new FormData(form);
    const params = {};

    // 过滤空值：仅保留非空字符串（含 trim 后非空）
    for (const [key, value] of formData.entries()) {
      if (typeof value === 'string' && value.trim() !== '') {
        params[key] = value.trim();
      }
      // 注意：对于 <select> 的空选项（value=""）、未选中的 checkbox/radio，
      // FormData 默认不包含它们 —— 这正是我们想要的行为
    }

    const url = `${form.action}?${new URLSearchParams(params)}`;
    window.location.href = url; // 触发标准 GET 跳转
  });
</script>

⚠️ 关键注意事项

• 空值判定逻辑：上述示例使用 value.trim() !== '' 判断，适用于文本输入框和 。若需支持数字、布尔等类型字段，请按需扩展判断逻辑（例如 value != null && value !== undefined）。
• / 处理：FormData 默认只包含已勾选/选中的控件，因此无需额外过滤——这是天然优势。
• 无障碍与降级支持：保留原 的 action 和 method，当 JavaScript 被禁用时，表单仍能以传统方式提交（含空字段），确保基础功能可用，符合渐进增强原则。
• Django 模板兼容性：该方案完全兼容 Django 模板语法（如 {% url %}、{{ person_types.items }}），只需将 action 属性正确渲染即可，无需修改后端路由逻辑。
• 不要使用 fetch() 或 XMLHttpRequest：本方案严格避免 AJAX，确保浏览器地址栏更新、历史栈记录、服务端日志可追溯，满足搜索场景对可链接性（linkability）的核心要求。