带有PHP漂亮URL的jQuery BBQ插件

Question

我在解决如何开始使用jQuery的BBQ插件以启用带有漂亮URL的Ajax网站中对前进/后退和书签的支持方面遇到麻烦。

我通过Apache mod_rewrite规则为我的PHP页面提供了漂亮的URL，以便可以通过http://example.org/store.php?cat_id=5访问[C0

这些URL仅在直接通过浏览器直接访问PHP页面时才相关，因为一旦用户登陆他们访问的第一页并单击任何内部链接，它们就会被我的JavaScript代码拦截，并且内容会更新通过Ajax（即，而不是重新加载页面）。

因此，这意味着我的后退/前进和书签功能不起作用，这是我来BBQ尝试实现该功能的地方。

[查看许多示例，我无法弄清楚如何使用漂亮的URL来实现此功能，因为我的href标记中尚未包含＃。我的href标签如下所示：

http://example.org/store/5

单击该链接将导致以下jquery ajax请求运行：

<a class='cat_link' href='/store/5' data-cat-id='5'>

[使用GET参数cat_id = 5从/views/tileview.php加载Ajax内容，并将结果HTML加载到#viewport div中。

现在，我的问题是，我可以使用BBQ插件来支持后退/前进和添加书签，而无需更改我的href以在其中包含哈希（即，使用当前URL）吗？另外，无论我是否需要更改URL，如何处理URL美观并且在其中没有“？=”意义上的“参数”的事实？

我当前的实现在没有JavaScript代码的情况下会降级，因此链接只会将访问者带到正确的URL，并且它们实际上看到的是相同的内容（尽管具有完整的PHP页面加载，而不仅仅是Ajax调用和更新的div）。这是我想要获得后退/前进和书签支持时要维护的东西。

Answer 1

非常复杂。但是，您可以使用底层jQuery，BBQ是建立在...之上的。请参阅

$('#container').delegate(".cat_link", "click", function(){
    $.get('/views/tileview.php',{ cat_id: $(this).data('cat-id') }, function(result){
        $("#viewport").hide().html(result).fadeIn(750);
    });
});

的param和deparam区域。您可以使用$ .param.fragment（）;或$ .param.querystring返回并推入没有哈希值的值。您可以在推送查询字符串之前重组查询字符串以表示您的Apache重写。

Answer 2

根据我对@Hannes出色回应的上述评论，最终，我通过重新编写事件处理程序以触发哈希更改，然后使用onhashchange事件来实现阿贾克斯电话。我还包括Ben Alman的hashchange插件，以确保与IE和其他不具有hashchange功能的浏览器兼容。

Ben Alman's site