如何使用#创建动态页面?

I have noticed that a a lot of pages like Twitter and a few other sites have incorporated AJAX into their design. One thing that has caught my attention is the use of #! in URLs. I am wonerding how I can do this for myself or the method they are using, Thanks!

我注意到很多页面，如Twitter和其他一些网站已经在设计中加入了AJAX。有一件事引起了我的注意，那就是#!在url。我不知道该如何为自己或他们使用的方法做这件事，谢谢!

1 个解决方案

#1

You can start with something very simple and use either Hashchange or BBQ plugin. Read the manuals of both and you will grasp the idea.

您可以从一些非常简单的东西开始，使用Hashchange或BBQ插件。阅读这两种方法的手册，你就会明白这一点。

And here is a short and general introduction: http://code.google.com/intl/en-EN/web/ajaxcrawling/docs/html-snapshot.html

这里有一个简短的介绍:http://code.google.com/intl/en-EN/web/ajaxcrawling/docs/html-snapshot.html

UPDATE:

更新:

Well, let's take Hashchange plugin as an example. The following code is very primitive, but I think it will help to understand the basic part

我们以Hashchange插件为例。下面的代码非常原始，但是我认为它将有助于理解基本部分

HTML:

HTML:

<ul>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact Us</a></li>
    <li><a href="/links">Links</a></li>
</ul>

<div id="page"></div>

JS:

JS:

$(function(){

    /*
     * We override the default
     * behaviour of our links
     * and change the hash of the URL,
     * e.g. '/contact' -> '#contact',
     * so the address bar of the browser
     * would change to 
     * 'http://example.com#contact'
     */
    $('ul').find('a').click(function() {
        var hash = $(this).attr('href').replace('#', '');
        window.location.hash = hash;

        return false;
    });

    /*
     * The main hashchange logic
     *
     * We use jQuery.load to retrieve
     * a specific part of the loaded document,
     * #page here
     */
    $(window).hashchange(function() {
        var newLoc = window.location.hash.replace('#', '');

        $('#page').load('/' + newLoc + ' #page');
    });

    $(window).hashchange();

});

#1