javascript - PHP、jQuery 和 Ajax 历史

Question

这很简单，但我在最近 8 小时的搜索中没有找到解决方案。

我需要的是从 jQuery 实现历史推送状态，但我不知道如何实现。

我试图了解如何使用 history.js 和其他代码，但它们似乎太复杂了。

是否有一个简单的解决方案，还是我还是太业余了？

我需要的功能:没有内容的网址更改。后退和前进按钮不会丢失 ajax 调用。

我有以下代码:

作为 JS 我有:

<script>
$(document).ready(function(){
    $("#module").load("module.php?module=home");
    $("#home_button").click(function(){
        $("#module").load("module.php?module=home");
    });
    $("#account_button").click(function(){
        $("#module").load("module.php?module=account");
    });
    $("#raul_button").click(function(){
        $("#module").load("module.php?module=profile&user_url=raul");
    });
});
</script>

作为 HTML，我有:

<button id="home_button">HOME</button>
<button id="raul_button">RAUL PROFILE</button>
<button id="account_button">ACCOUNT</button>
<div id="module"></div>

HTACCESS

RewriteRule members(.*)\.aspx$ /?module=profile
RewriteRule ^([^/]*)\.aspx$ /?module=$1 [L]
RewriteRule ^([^/]*)\.html$ /index.php?module=profile&user_url=$1 [L]

Answer 1

我建议使用普通链接而不是按钮。我们不要让事情变得比他们需要的更困难!

首先，您需要捕获对链接的所有点击。在这里面，一些魔法发生了。

$(document).on('click', 'a', function(event) {
    event.preventDefault();

    var href = $(this).attr('href'); // what page are you getting?

    $.get(href, function(data) {

        $('#module').html(data);

        var current_page = $('html').html();

        // add an item to the history log
        history.pushState(current_page, event.target.textContent, event.target.href);

    });

});

您还需要确保，如果您转到您的 URL，您会将内容保存到历史记录中，以防您需要在历史记录中倒退。

var current_page = $('html').html();

// Store the initial content so we can revisit it later
history.replaceState(current_page, document.title, document.location.href);

最后，捕获所有状态变化(当按下后退或前进按钮时)。

// Revert to a previously saved state
window.addEventListener('popstate', function(event) {
    console.log('popstate fired!');
    $('html').html(data);
});

当我需要做一个关于这个的小项目时，我根据已经存在的关于这个主题的多个 SE 答案编译了这段代码。 History.js 看起来非常强大，但您基本上可以使用与此完全相同的代码，但用 History 替换 history。

此外，我建议在特定的 div 中加载内容并使用 fadeIn/fadeOut 效果以获得更好的用户体验! (参见 http://usatoday.com)

注意:此代码并非 100% 完美且无法发布，因此请根据需要进行调整。当您使用它时，您可能会注意到更改一些代码将更好地帮助您实现目标。