Question

我正在尝试在自己的电子商务网站上实施AJAX过滤并寻找最佳解决方案。

我提出的是：

静态生成所有内容（由服务器端构建，然后在同一页面上使用参数调用ajax请求）。唯一的缺点是用户没有任何回溯历史，因为他的URL页面没有改变。

我会尝试实现history.api等，但只是在这里看到了这个很棒的过滤：http://trendygolf.com/shop?brand[]=15&brand[]=27&price-min=0&pricemax=2000&sort=newest

从我看到它使AJAX调用AND更改URL而不重新加载页面，这怎么可能？

当然，它只是将新的html页面替换为来自请求的新html页面

我很想听听这方面的一些帮助，最佳做法，优点/缺点，以及trendgolf.com如何做到这一点。

Answer 1

关于更新URL到位，它是HTML5的一部分，但不是100％确定IE支持的方式。这将有效：

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

要了解有关此类内容的更多信息，请查看Mozilla文档：https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history

Answer 2

除了newmu给出的答案当你需要在ajax调用上维护历史/状态时，你应该使用hashtags
这是符号哈希（'＃'）之后的url的一部分。在网址中#之后写的任何内容都没有发送到服务器
在仍然不支持history api的浏览器中，hashtags用于维护状态
还可以在不重新加载页面的情况下更改主题标签

Answer 3

听起来您可以使用History.js库，它允许您从JavaScript更改浏览器的状态/ URL。基本上这个库使用HTML5 History API（如果可用），但可以在不支持此功能的浏览器中模拟它。 History.js虽然是一个低级API，但您可能希望在其上使用路由器抽象，这大大简化了编程。为此，我实现了StateRouter.js库。

一个如何使用StateRouter.js的简单示例：

function getHome() {
}
function getPersons() {
}
function getPerson(id) {
}

var router = new staterouter.Router();
// Configure routes
router
  .route('/', getHome)
  .route('/persons', getPersons)
  .route('/persons/:id', getPerson);

$(document).ready(function () {
    // Perform initial routing
    router.perform();

    // Navigate to a URL
    router.navigate('/persons/1');

    // Go back
    router.back();

    // Go forward
    router.go(1);
});

如何使用AJAX实现动态过滤并保持可用的历史记录？

3 个答案: