Question

我最近发现了如何使用History.js，jQuery和ScrollTo使用HTML5 History API对网站进行Ajax化的要点：https://github.com/browserstate/ajaxify

我很难得到一个简单版本的工作，我不确定我理解一切。首先，我加载了gist中提供的所有脚本，然后设置了一个非常简单的导航和内容部分：

 <ul id="nav">
    <li id="home-link"><a href="/" title="Home">Home</a>/</li>
    <li id="work-link"><a href="/work" title="Work">Work</a>/</li>
    <li id="labs-link"><a href="/labs" title="Labs">Labs</a>/</li>
    <li id="blog-link"><a href="/blog" title="Blog">Blog</a>/</li>
    <li id="contact-link"><a href="/contact" title="Contact">Contact</a></li>
</ul>

<div id="content"></div>

接下来，我更改了选择器变量以匹配html：

/* Application Specific Variables */
contentSelector = '#content',
$content = $(contentSelector),
contentNode = $content.get(0),
$menu = $('#nav'),
activeClass = 'active',
activeSelector = '.active',
menuChildrenSelector = 'li',

接下来应该做的就是我迷路的地方。我想要做的就是加载特定于所选导航链接的html内容。因此，如果我点击“工作”，我想将work.html文件加载到内容部分，并将网址更改为“mywebsite.com/work”。为了让事情变得简单，可以说work.html和所有其他可共享的内容都位于同一目录中。

非常感谢任何帮助！干杯!

Answer 1

所以这里有一个真正的简单例子，说明我如何最终激活我正在研究的网站，这启发了这个问题。对不起，真的很长时间了。首先是HTML：

    <ul id="nav">
        <li id="home-link"><a href="home" class="ajaxify" title="Home">Home</a></li>
        <li id="work-link"><a href="work" class="ajaxify" title="Work">Work</a></li>
        <li id="labs-link"><a href="labs" class="ajaxify" title="Labs">Labs</a></li>
        <li id="blog-link"><a href="blog" class="ajaxify" title="Blog">Blog</a></li>
    </ul>

    <div id="content">Home Content</div>

接下来是Javascript：

 <script type="text/javascript">

    var directory = 'content/'; //directory of the content we want to ajax in
    var state = History.getState();

    //for when they click on an ajax link
    $('.ajaxify').on('click', function(e){
        var $this = $(this);
        var href = $this.attr('href'); // use the href value to determine what content to ajax in
        $.ajax({
            url: directory + href + '.html', // create the necessary path for our ajax request
            dataType: 'html',
            success: function(data) {
                $('#content').html(data); // place our ajaxed content into our content area
                History.pushState(null,href, href + '.html'); // change the url and add our ajax request to our history
            }
        });
        e.preventDefault(); // we don't want the anchor tag to perform its native function
    });

    //for when they hit the back button
    $(window).on('statechange', function(){
        state = History.getState(); // find out what we previously ajaxed in
        $.ajax({
            url: directory + state.title + '.html', //create our path
            dataType: 'html',
            success: function(data) {
                $('#content').html(data);
            }
        });
    });
    </script>

基本上我所做的就是用“ajaxify”类拦截锚标签点击，用于表示我想要加载的具体内容。一旦我拦截了点击并确定要加载的内容，我就会使用history.js pushSate （）跟踪用户通过网站的顺序并更改网址而不重新加载页面。如果他们决定点击后退按钮，状态更改侦听器将加载正确的内容。如果他们决定点击刷新按钮，您将需要提供一种使用不同网址名称复制索引页的方法。这在php中很容易，或者您可以根据需要复制，粘贴和重命名索引页。

以下是我在Github上发布的一个例子：https://github.com/eivers88/ajaxify-simple-demo

提醒一下，在本地使用ajax时，最好在MAMP或WAMP等个人网络服务器上运行您的项目。如果没有服务器运行，此演示将在chrome中失败。但是，它应该在没有服务器的Firefox中工作。

需要帮助了解如何ajaxify一个网站

1 个答案: