如何在GET表单中保留输入字段值里的问号？

这个问题我之前也碰到过，核心原因是浏览器对url类型的输入框有特殊的URL解析逻辑：当你用GET方法提交表单时，浏览器会自动解析输入的URL内容，把?及其后面的部分当成额外的查询参数处理，导致原输入里的?被“吃掉”，服务器端收到的参数就变样了。不用JavaScript的话，有两种简单的解决方式：

方案一：修改输入框类型为text #

把输入框的type从url改成text，这样浏览器就不会对输入内容做URL解析，会完整地将所有输入字符（包括?）进行URL编码（把?转成%3F）后作为url参数的值提交。服务器端接收到后，只要正常解码就能得到原始的带问号的内容。

修改后的表单代码如下：

<form method="GET" name="search" action="/api">
  Name: <input type="text" name="url" />
  <input type="submit" value="Search"/>
</form>

方案二：改用POST方法提交（如果业务允许） #

如果你的业务场景可以接受用POST方法提交数据，也能解决这个问题。POST方法会把表单数据放在请求体里，而不是URL的查询字符串中，浏览器不会对输入的URL内容做特殊拆分，服务器端可以直接拿到完整的带问号的输入值。

修改后的表单代码：

<form method="POST" name="search" action="/api">
  Name: <input type="url" name="url" />
  <input type="submit" value="Search"/>
</form>

注意：改用POST后，服务器端需要对应调整参数的获取方式（从查询字符串改为请求体中读取）。

内容的提问来源于stack exchange，提问作者João Pedro Schmitt