ajax GET请求不会在URL中显示params

时间:2014-02-18 17:28:49

标签: jquery ajax get

我正在尝试使用jQuery AJAX函数对表单执行GET请求,但问题是我没有看到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();
});

提交后,我希望网址如下所示:

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

我知道e.preventDefault();这就是为什么参数没有出现在URL中的原因,但是我需要这样做而没有刷新页面,同时,我希望在做GET请求时看到参数。

请帮忙!

感谢。

1 个答案:

答案 0 :(得分:2)

您可以使用window.history.pushState在Chrome,Safari,FF4 +和IE10等现代浏览器中完成所需。

这里有一篇好文章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”);