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

【问题标题】：modifying query string in url without reloading在不重新加载的情况下修改 url 中的查询字符串
【发布时间】：2013-01-01 07:22:41
【问题描述】：

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

这是 my page

请让我帮忙。

【问题讨论】：

那么为什么还要附加到 url 呢？你能不把你选择的值存储在局部变量中，然后进行ajax调用吗？
指向您网页的链接不能替代在您的问题中发布相关代码。一个页面中可能有很多脚本，并且将来 URL 可能会更改，从而使您的帖子对未来有类似问题的访问者无用
因为我想为过滤后的内容添加书签。 @ryadavilli

标签： jquery asp.net

【解决方案1】：

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

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

jQuery ajax 可以如下使用。 jQuery API

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

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

【讨论】：

除了我想为过滤的东西的网址添加书签。我认为这些方式将查询刺痛传递给ajax并返回结果。我正在传递给浏览器 url。作为参考，请参阅上面的 filpkart 链接，让我确认是否通过上述方法发生了 Flipkart 功能。谢谢你
为此，您可以使用一些基于 URL 哈希/片段的技术。在 URL 中，输入 # 并在此之后保存您的数据。结帐jQuery BBQ。这可用于处理 URL 值。 deparam.fragment() 可以用于此
如何使用相同的键为不同的值推送状态。例如：设计=1 和设计=2，但问题是它取代了设计的价值，而我从设计键中推动了另一个价值。因为我在查询字符串中同时需要 design=1&design=2 以便我可以相应地进行过滤，请帮助我处理这些
多次使用相同的键不是一个好主意。相反，您可以使用 design=1#2 或类似的东西。

【解决方案2】：

一些 HTML5 兼容的网络浏览器已经实现了一个历史 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

【讨论】：