Ajax GET не показывает Params в URL

Question

Я пытаюсь сделать GET запрос на форму с помощью функции JQuery AJAX, но проблема в том, что я не вижу параметры в URL:

Вот код:

<form id="search_form" method="GET" action=""> 
    <input id="seach_input" type="text" name="q"> 
    <button id="search_btn" class="btn btn-warning" type="submit">Search</button> 
</form> 

Вот код Javascript:

$("#search_form").on('submit', function(e) { 

    $.ajax({ 
     url: "index.html", 
     type: "GET", 
     data: {name: "hello"}, 
     success: function() { 
      console.log("success); 
     } 
    }); 

    e.preventDefault(); 
}); 

После я представить, я хочу, чтобы URL, чтобы выглядеть следующим образом:

http://localhost/search.html?q=value 

Я знаю, e.preventDefault(); является причиной того, что параметры не отображаются в URL-адресе, но мне нужно сделать это, не обновляя страницу, и в то же время я хочу видеть параметры, когда я делаю запрос GET.

Пожалуйста, помогите!

Спасибо.

Answer 1

Что вы хотите сделать в современных браузерах, таких как Chrome, Safari, FF4 + и IE10, используя window.history.pushState.

Хорошая статья здесь http://spoiledmilk.com/blog/html5-changing-the-browser-url-without-refreshing-page/

Вы должны были бы добавить что-то вроде этого в ваш код.

window.history.pushState(“object or string”, “Title”, “/new-url”); 

Кроме того, если вы не хотите, чтобы пользователь мог перемещаться тогда использовать replaceState вместо

window.history.replaceState(“object or string”, “Title”, “/another-new-url”);