Как можно запретить показывать переменные «get» в URL-адресе?

Question

Я сейчас в работе формуляр поиска который содержит много полей и я хочу, чтобы ссылки, произведённые указанной формой, были максимально короткими.
Следовательно, мне нужно предотвратить появление пустых или неопределенных переменных в 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 имеет ответ, но я в настоящее время не знаю, как его достичь.

Answer 1

Вы можете попробовать использовать jquery.serialize() метод, то split строки результата по & проверке, если параметр Дифференца имеет значение и вставить в другом массиве, если он имеет, наконец join результат строку с помощью & и изменить 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>

Надеюсь, что это поможет,