如何防止空的“get”变量显示在 url 中？ [复制]答案

【问题标题】：How can empty "get" variables be prevented from showing in the url? [duplicate]如何防止空的“get”变量显示在 url 中？ [复制]
【发布时间】：2015-01-27 23:37:27
【问题描述】：

我目前正在处理具有许多字段的搜索表单，我希望该表单生成的链接尽可能短。
因此，我需要防止 url 中出现空变量或未定义变量。

我将做一个简短的例子来说明我正在尝试做的事情：

<form method="get">
    <input type="text" name="variable_one"/>
    <select name="variable_two">
        <!--options-->
    </select>
    <select name="variable_three">
        <!--options-->
    </select>
    <input type="submit" value="Submit form!"/>
</form>

在这种情况下，默认情况下，如果我用字符串“foo”填充第一个字段，然后提交表单，则 url 将如下所示：

example.com/search?variable_one=foo&variable_two=&variable_three=

我需要删除空变量，如下所示：

example.com/search?variable_one=foo

空的 url 变量在这种情况下没有用处，删除它们会使链接更容易使用，或者至少更短。

我认为 javascript 拥有答案，但我目前不知道如何实现。

【问题讨论】：

为什么 GET 不是 POST？
因为，正如我所描述的，我希望用户能够分享或保存他们的搜索查询，我认为这意味着使用 url 变量，因此是 GET 方法。
JS 实际上无法访问生成的 URL，但是您可以使用一些工具从表单构建 queryString，jQuery 内置了它。你可能需要一个 replace() 调用来去除空。您还可以删除任何空输入 onsubmit() 的名称，它应该从 key=value 对中删除。
这个问题，已经被问过并得到了答案：见stackoverflow.com/questions/21271525/…

标签： javascript html

【解决方案1】：

您可以尝试使用jquery.serialize() 方法，然后split 使用& 的结果字符串检查差异参数是否有值，如果有则插入另一个数组，最后join 使用& 的结果字符串并使用您的 url 更改 location.href 并将结果字符串与您的参数连接（当然，而不是所有这些 split,join... 你可以使用 string.replace 使用正则表达式来完成它）：

    $( "form" ).on( "submit", function( event ) {
      event.preventDefault();
      var url = $( this ).serialize();
      var array = url.split('&');
      var resultArray = [];
      for(i in array){
        console.log(array[i].split('='));
        if(array[i].split('=')[1]){
           resultArray.push(array[i]);
        }
      }
      var url_params = resultArray.join('&');
      var yourURL = "http://your_url" + "?" + url_params;
      // do your get...
      alert("location.href to " + yourURL);
      location.href = yourURL;
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="get">
        <input type="text" name="variable_one"/>
        <select name="variable_two">
            <option value="a">a</option>
            <option value=""></option>
        </select>
        <select name="variable_three">
            <option value=""></option>
            <option value="a">a</option>
        </select>
        <input type="submit" value="Submit form!"/>
    </form>

希望这会有所帮助，

【讨论】：