GET提交表单时URL末尾自动添加?a=a的原因是什么？如何移除？

问题根因 #

• GET表单的默认提交逻辑：会将表单内所有带name属性的输入控件的值，以key=value的形式拼接为查询字符串，追加到action属性指定的URL末尾。你代码中明确写了<input type="hidden" name="a" value="a">，这个隐藏字段就是URL末尾?a=a的直接来源。
• 额外注意：你代码中定义了变量searchp存储输入值，但拼接action时用的是未定义的${search}，属于笔误，会导致路由参数不符合预期。

解决方法 #

方法1：直接删除无用的隐藏字段（最推荐） #

如果这个a参数没有实际业务用途，直接删除该隐藏input，同时修正action拼接的变量即可：

var searchp = search.querySelector("input.search-input").value;
document.body.innerHTML += `<form id="jsForm" action="/sact/${searchp}/" method="GET"></form>`;
document.getElementById("jsForm").submit();

修改后表单没有任何带name的输入项，提交后不会自动追加任何查询参数。

方法2：改用POST提交（适合参数不需要在URL体现的场景） #

如果a参数是后端逻辑必须的，但不希望出现在URL中，将表单提交方式改为POST，同时后端新增对应POST路由即可：
前端代码：

var searchp = search.querySelector("input.search-input").value;
document.body.innerHTML += `<form id="jsForm" action="/sact/${searchp}/" method="POST"><input type="hidden" name="a" value="a"></form>`;
document.getElementById("jsForm").submit();

后端代码新增：

router.post('/sact/:where', async (req, res, next) => {
  // 可通过req.body.a获取参数值
  res.render('search');
});

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