javascript - 如何防止 url 中显示空的 "get"变量？

Question

我目前正在开发一个具有许多字段的搜索表单，并且我希望该表单生成的链接尽可能短。
因此，我需要防止 url 中出现空或 undefined variable 。

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

<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”填充第一个字段，然后提交表单，则网址将如下所示:

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

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

example.com/search?variable_one=foo

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

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

Answer 1

您可以尝试使用jquery.serialize()方法，然后通过&检查不同参数是否有值并分割结果字符串插入另一个数组(如果有)，最后使用 &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>

希望这有帮助，