我正在尝试使用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请求时看到参数。
请帮忙!
感谢。
答案 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”);