jquery - 在不重新加载的情况下修改 url 中的查询字符串

Question

我通过传递查询字符串来过滤产品。但问题是，每次我选择一个过滤器时，querysting 都会附加到 url 并重新加载页面。我不想重新加载页面，只需传递查询字符串并通过 ajax 调用过滤产品。就像Flipkart正在做的那样

这是我的页面

请让我帮助解决这些问题。

Answer 1

您可以使用jquery ajax. 太简单了

您需要创建一个 ashx/asmx 页面，该页面将根据传递的 url 参数返回结果。我建议返回 aJSON作为结果。

jQuery ajax 可以如下使用。jQuery API

$.ajax({
  url: "GetItems.ashx?design=1";
}).done(function() { 
  alert("Got the results");
});

然后您可以使用 jQuery 模板来呈现 JSON 数据。jQuery API

Answer 2

一些兼容 HTML5 的网络浏览器已经实现了一个 History API，它可以用于类似你想要的东西：

if (history.pushState) {
    var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?myNewUrlQuery=1';
    window.history.pushState({path:newurl},'',newurl);
}

我测试了，效果很好。它不会重新加载页面，但它只允许您更改 URL 查询。您将无法更改协议或主机值。

了解更多信息：

http://diveintohtml5.info/history.html

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history