jQueryBBQ插件与PHP漂亮的URL

Question

我很难弄清楚如何开始使用jQuery的BBQ插件，以便在我的Ajax站点中使用漂亮的URL支持前向/后向和书签。

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

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

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

看了很多例子，我不知道如何使用漂亮的URL，因为我的href标签还没有包含#。我的href标签如下：

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

点击该链接将运行以下jquery ajax请求：

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

它使用GET参数cat_id＝5从/views/tileview.php加载Ajax内容，并将结果HTML加载到#viewportdiv.

现在，我的问题是，我是否能够使用BBQ插件来支持后退/前进和书签，而不更改我的hrefs以在其中包含哈希（即使用当前URL）？此外，无论我是否需要更改我的URL，我都该如何处理URL很漂亮并且在"？="中没有"参数"的事实感觉

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

Answer 1

这很复杂。然而，你可以使用较低级别的jQuery烧烤是建立在。。。查看Ben Alman网站的参数和部门区域。您可以使用$.param.fragment（）；或$.param.querystring返回和推送不带散列的值。在推送querystring之前，您可以重新构造querystring以表示您的apache重写。

Answer 2

根据我上面对@Hannes的评论，我最终能够使用我漂亮的url格式，通过重新编写事件处理程序来触发哈希更改，然后使用onhashchange事件进行ajax调用。我还加入了本·阿尔曼的hashchange插件，以确保与IE和其他没有hashchange功能的浏览器兼容。

$(document).ready(function(){
  //pre-load spinner image to ensure it's already cached before it's used
  var image = $('<img />').attr('src', '/js/spinner/ajax-loader.gif');
  var opts = {
            img: '/js/spinner/ajax-loader.gif',
            height: 42,
            width: 42,
            position: 'center',
            hide: true
        };
  var current_hash = '';
      //if this is a straight URL, cache the contents to use later in case 
      //  of back button being used to come back here
  if (window.location.hash == '') {
      var cache_viewport = $('#viewport').html();
  }
$('#container').delegate(".cat_link", "click", function(){
    var href = $(this).attr('href');
    window.location.hash = "#" + href;
    return false;
   });
$('#container').delegate(".product_tile_a", "click", function(){
    var href = $(this).attr('href');
    window.location.hash = "#" + href;
    return false;
   });

 $(window).hashchange(function(){
  var hash = window.location.hash;
      //if the new hash is a straight URL, reload the straight URL's html content
  if (hash == '') {
      $("#viewport").html(cache_viewport);
  }
  else if (hash != current_hash) {
    var strings = hash.split("/");
    var action = strings[1];
    var param = strings[2];
    current_hash = hash;
    callAjax(action, param);
}
 });
 function callAjax(action, param) {
  switch(action) {
      case 'store':
        $("#viewport").spinner(opts);
        $.get('/views/tileview.php',{ cat_id: param }, function(result){   
            $("#viewport").spinner('remove'); 
            $("#viewport").hide().html(result).fadeIn(500);
            });
            break;
      case 'products':
        $("#viewport").spinner(opts);
        $.get('/views/productview.php',{ product_id: param },function(result){   
            $("#viewport").spinner('remove'); 
            $("#viewport").hide().html(result).fadeIn(500);
            });
            break;
      default:
        null;
    }
}
 //ensures hashchange is called on initial load in case of a bookmarked hash
 $(window).hashchange();
});