jquery bbq不能得到漂亮的網址;使用pushstate

Question

謝謝。

的URL看起來像這樣： http://mysite.com/#main=mysite.php%3Fid%3D108&main=mysite.php%3Fid%3D108

我試着讓他們看起來像這樣： http://mysite.com/#main=mysite.php?id=108&main=mysite.php?id=108

下面是代碼：

$(function(){ 
     $('.bbq').each(function(){ 
     $(this).data('bbq', { 
      cache: { 
      '': $(this).find('.bbq-default') 
      } 
     }); 
     }); 

    // For all links inside a .bbq widget, push the appropriate state onto the 
    // history when clicked. 
     $('.bbq a[href^=#]').live('click', function(e){ 
     var state = {}, 

      // Get the id of this .bbq widget. 
      id = $(this).closest('.bbq').attr('id'), 

      // Get the url from the link's href attribute, stripping any leading #. 
      url = $(this).attr('href').replace(/^#/, ''); 

     // Set the state! 
     state[ id ] = url; 
     $.bbq.pushState(state); 

     return false; 
     }); 

    $(window).bind('hashchange', function(e) { 

    // Iterate over all .bbq widgets. 
     var that = $(this), 

     // Get the stored data for this .bbq widget. 
     data = that.data('bbq'), 

     // Get the url for this .bbq widget from the hash, based on the 
     // appropriate id property. In jQuery 1.4, you should use e.getState() 
     // instead of $.bbq.getState(). 
     url = $.bbq.getState(that.attr('id')) || ''; 

     // If the url hasn't changed, do nothing and skip to the next .bbq widget. 
     if (data.url === url) { return; } 

     // Store the url for the next time around. 
     data.url = url; 

     // Remove .bbq-current class from any previously "current" link(s). 
     that.find('a.bbq-current').removeClass('bbq-current'); 

     // Hide any visible ajax content. 
     that.find('.bbq-content').children(':visible').hide(); 

     // Add .bbq-current class to "current" nav link(s), only if url isn't empty. 
     url && that.find('a[href="#' + url + '"]').addClass('bbq-current'); 

     if (data.cache[ url ]) { 
     // Since the widget is already in the cache, it doesn't need to be 
     // created, so instead of creating it again, let's just show it! 
     data.cache[ url ].show(); 

     } else { 
     // Show "loading" content while AJAX content loads. 
     that.find('.bbq-loading').show(); 

     // Create container for this url's content and store a reference to it in 
     // the cache. 
     data.cache[ url ] = $('<div class="bbq-item"/>') 

      // Append the content container to the parent container. 
      .appendTo(that.find('.bbq-content')) 

      // Load external content via AJAX. Note that in order to keep this 
      // example streamlined, only the content in .infobox is shown. You'll 
      // want to change this based on your needs. 
      .load(url, function(){ 
      // Content loaded, hide "loading" content. 
      that.find('.bbq-loading').hide(); 
      }); 
     } 
    }); 
    }) 

      $(window).trigger('hashchange'); 

}); 

編輯

我應該說得更清楚一些： http://mysite.com/#main=page1.php?id=108&main2=page2.php?id=108 用字符串加載其他頁面。

Answer 1

你正在尋求漂亮的網址，但你所要求的網址格式遠非「漂亮」。

你問你的URL看起來像這樣：

http://mysite.com/#main=page1.php?id=108&main2=page2.php?id=108 

基本上你的URL格式告訴我，你這是引用自己的URL中的另一個網址的網頁上，而且這個網址是引用本身就是引用第三個URL。這是一個非常複雜的URL方案，很可能會混淆用戶。你試圖用它達到什麼目的？

以這種方式將組件添加到ajax站點中的URL哈希的目的是爲用戶提供他可以鏈接到的內容或書籤。問問你自己，你提供的參數是否有幫助。

它看起來像我可以在URL哈希中簡單地使用id=108來實現同樣的事情。其他所有內容都是用戶不需要在URL中看到的絨毛。您的Javascript代碼可以在內部重建Ajax網址，而無需用戶瞭解它們。