1

我无法弄清楚如何开始使用 jQuery 的 BBQ 插件，以便在我的 Ajax 站点中启用对前进/后退和书签的支持，以及漂亮的 URL。

我通过 Apache mod_rewrite 规则为我的 PHP 页面提供了漂亮的 URL，因此可以通过http://example.org/store/5访问http://example.org/store.php?cat_id=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 加载到 #viewport div 中。

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

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

4

2 回答 2

0

这很复杂。但是，您可以使用烧烤建立在其之上的较低级别的 jQuery... 请参阅Ben Alman 网站的 param 和 deparam 区域。您可以使用 $.param.fragment(); 或 $.param.querystring 返回和推送不带散列的值。您可以在推送查询字符串之前重构查询字符串以表示您的 apache 重写。

于 2012-01-25T08:25:13.620 回答
0

根据我上面对@Hannes 出色响应的评论，我最终能够通过重写我的事件处理程序来触发哈希更改，然后使用 onhashchange 事件进行 ajax 调用，从而利用我漂亮的 url 格式来发挥我的优势. 我还包括了 Ben Alman 的 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();

});
于 2012-01-26T11:10:32.497 回答