如何通过 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）的核心要求。