删除查询字符串“？”在 HTML 表单方法 GET

Question

我有一个简单的 Google 图片搜索表单，可在新窗口中打开。当我想将表单参数更改为 Unsplash（在其 URL 搜索中不使用查询字符串）时，表单会继续发送查询字符串；(

HTML

<input type="radio" id="google" name="image" onclick="googleImages();" checked/>
<label for="google">Google Images</label>

<input type="radio" id="unsplash" name="image" onclick="unsplash();"/>
<label for="unsplash">Unsplash</label>

<form id="form" method="GET" action="https://www.google.com/search?q=">
    <input id="input" type="text" name="q" value="" required>
    <input type="submit" value="Search" onclick="this.form.target='_blank';">
    <input id="helper" type="hidden" name="tbm" value="isch">
</form>

JS

var
  form = document.getElementById("form"),
  input = document.getElementById("input"),
  helper = document.getElementById("helper");

function googleImages() {
  form.action="https://www.google.com/search?q=";
  input.name="q";
  helper.name="tbm";
  helper.value="isch";
}
function unsplash() {
  form.action="https://unsplash.com/search/photos/";
  input.name="";
  helper.name="";
  helper.value="";
}

如何创建一个从输出 URL 中删除查询字符串的函数？ （并在单选选项需要时再次设置参数）

• 请参阅此处的代码：http://jsbin.com/qitadepoxu/1/edit?html,js,output

Answer 1

因此，如果您不向 unsplash.com 发送任何参数，请不要使用表单提交。而是在 unsplash() 函数中使用 javascript 重定向。

window.location.href = "https://unsplash.com/search/photos/";

Answer 2

您在评论中澄清说，在调用 Unsplash 时，您需要将搜索字符串作为 URL 的一部分而不是作为查询字符串参数传递，如下所示：https://unsplash.com/search/photos/lion

要使用您当前的设置，您需要做两件事：

1. 将字符串添加到 URL，然后

2. 禁用表单域。禁用的表单字段根本不会随表单一起发送； link to spec。 （当然，您也可以删除它们，但如果您在某个时候更改表单以使其具有target="_blank" 或类似名称，则删除它们会使允许 Unsplash 搜索后跟 Google 图片变得复杂搜索。）

所以是这样的：

function unsplash() {
  // #1
  form.action="https://unsplash.com/search/photos/" + encodeURIComponent(input.value);
  // #2
  input.disabled = true;
  helper.disabled = true;
  helper.disabled = true;
}

注意encodeURIComponent的使用。

当然，如果您确实更新了页面以打开一个新窗口而不是替换当前窗口，您将更新您的 googleImages 函数以在这些输入上将 disabled 设置为 false（因为它将由unsplash 函数留下true）。不过，如果您要替换页面，则不必这样做。