如何用现代JavaScript实现不含空字段的非AJAX GET表单提交？

你可以利用FormData API结合URLSearchParams实现需求，不需要创建新表单，代码简洁现代，同时保留正常页面跳转的行为。

实现步骤 #

无需修改原表单结构，只需要添加一段JavaScript监听表单提交事件：

// 获取表单元素
const searchForm = document.getElementById('advanced-search-form');

// 监听提交事件
searchForm.addEventListener('submit', function(e) {
  // 阻止浏览器默认的GET提交行为（避免带空参数）
  e.preventDefault();

  // 用FormData收集当前表单的所有数据
  const formData = new FormData(this);
  // 创建URLSearchParams对象用于构建查询字符串
  const filteredParams = new URLSearchParams();

  // 遍历表单数据，只保留非空的参数
  for (const [fieldName, fieldValue] of formData) {
    // 过滤空字符串和纯空格的情况
    if (fieldValue.trim() !== '') {
      filteredParams.append(fieldName, fieldValue);
    }
  }

  // 拼接目标URL：表单的action地址 + 过滤后的查询字符串
  const targetUrl = `${this.action}${filteredParams.toString() ? '?' : ''}${filteredParams.toString()}`;
  
  // 跳转到搜索结果页，和原生表单提交体验一致
  window.location.href = targetUrl;
});

代码说明 #

• FormData：自动收集表单中所有输入项的键值对，包括文本框、下拉选择框等，无需手动逐个获取字段值
• URLSearchParams：自动处理参数编码（比如空格转%20），避免手动拼接字符串出现编码问题
• 过滤逻辑：通过trim()排除纯空格的无效输入，确保只有实际填写的内容才会被加入URL参数
• 页面跳转：用window.location.href实现正常的页面跳转，和原生表单提交的行为完全一致，不会使用AJAX请求

额外说明 #

如果表单包含复选框、单选按钮，FormData只会收集被选中的项，未选中的不会被纳入，因此无需额外处理这类字段的空值问题。

内容的提问来源于stack exchange，提问作者coredumperror