本文介绍一种基于 FormData 和 URLSearchParams 的现代方案，拦截原生表单提交、过滤空值后重定向至精简 URL，既保留传统页面跳转行为，又避免冗余查询参数。
本文介绍一种基于 `formdata` 和 `urlsearchparams` 的现代方案，拦截原生表单提交、过滤空值后重定向至精简 url，既保留传统页面跳转行为，又避免冗余查询参数。
在构建搜索类表单（尤其是多字段 GET 请求）时，一个常见痛点是：用户仅填写了部分字段，但浏览器默认会将所有 和
https://domain/search/advanced_search?givenName=Ben&sn=&telephoneNumber=&personType=&physicalDeliveryOfficeName=&department=
这不仅影响可读性与分享体验，还可能干扰服务端解析或缓存策略。幸运的是，无需手动拼接 DOM 或弃用表单——现代浏览器提供了简洁、标准且语义清晰的解决方案。
核心思路：拦截 → 过滤 → 重定向
我们不改变表单结构，而是通过监听 submit 事件，阻止默认提交行为，利用 FormData 高保真地采集当前表单数据，再借助 URLSearchParams 构建纯净查询字符串，最后通过 window.location.href 触发原生导航。整个过程保持“非 AJAX”特性：页面完整跳转、URL 可书签化、浏览器前进/后退正常工作。
✅ 完整实现代码
<form id="advanced-search-form" action="{% url 'search:advanced_search' %}" method="GET">
<!-- 表单结构保持不变（含 Django 模板语法） -->
<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>
{% for slug, type in person_types.items %}
<option value="{{ slug }}">{{ type }}</option>
{% endfor %}
</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" {{ input_attrs }} 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');
if (form) {
form.addEventListener('submit', function (e) {
e.preventDefault(); // 阻止默认提交
const formData = new FormData(form);
const cleanParams = {};
// 过滤掉空值（包括空字符串、仅空白符、null、undefined）
for (const [key, value] of formData.entries()) {
if (value && typeof value === 'string' && value.trim() !== '') {
cleanParams[key] = value.trim();
}
// 注意：FormData.entries() 对 <select> 未选中项返回空字符串，已自动被过滤
}
const url = `${form.action}?${new URLSearchParams(cleanParams)}`;
window.location.href = url; // 触发原生跳转
});
}
</script>? 关键细节说明
- FormData 的优势：自动处理 、
- 空值判断逻辑：使用 value && typeof value === 'string' && value.trim() !== '' 可安全排除 ""、" "、null、undefined；若需支持数字/布尔字段，可扩展类型检查。
- URLSearchParams 的可靠性：自动编码特殊字符（如空格→%20），比手写 encodeURIComponent 更健壮，且是标准 API（MDN 文档）。
- 渐进增强设计：当 JavaScript 不可用时，表单仍按原 method="GET" 行为提交，保证基础功能可用——这是现代 Web 开发的重要原则。
⚠️ 注意事项
- 确保
