2

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

我想出的是：

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

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

从我所看到的情况来看，它会在不重新加载页面的情况下进行 AJAX 调用并更改 URL，这怎么可能？

当然，它只是用请求中的新页面替换旧的 html 页面

我很想听听这方面的一些帮助，什么是最佳实践，优点/缺点，以及 Trendygolf.com 是如何做到这一点的。

4

3 回答 3

2

关于更新 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

于 2013-01-24T10:03:18.727 回答
1

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

于 2013-01-24T10:41:08.360 回答
1

听起来您可以使用History.js库，它可以让您从 JavaScript 更改浏览器的状态/URL。基本上这个库使用 HTML5 History API（如果可用），但可以在不支持它的浏览器中模拟它。虽然 History.js 是一个低级 API，但您可能希望在其之上使用 Router 抽象，这大大简化了您的编程。为此，我实现了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);
});
于 2013-01-24T12:49:44.447 回答