Javascript PHP、jQuery和Ajax历史

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

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

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

有没有一个简单的解决办法，还是我还是太业余了

我需要的功能： Url在没有内容的情况下更改。 后退和前进按钮，而不会丢失ajax调用

我有以下代码：

正如我所说：

<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>

---

我建议使用普通链接，而不是按钮。让我们不要让事情变得更加困难

首先，您需要捕获链接上的所有点击。在这里面，一些神奇的事情发生了

$(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);

最后，捕获所有状态更改（当按下后退或前进按钮时）

当我需要在这个问题上做一个小项目时，我从关于这个问题的多个SE答案中编译了这段代码。js看起来非常强大，但实际上您可以使用与此完全相同的代码，但可以用历史替换历史

此外，我建议在特定的

divs

中加载内容，并使用fadeIn/fadeOut效果，以获得更好的用户体验！（见附件）

---

注意：这段代码不是100%完美的，还没有准备好发布，所以根据需要进行调整。当您使用它时，您可能会注意到更改某些代码会更好地帮助您的工作。

如果您只支持现代浏览器（）则可以轻松使用函数：

window.history.pushState（null，null，“/home link）

iMakeWebsites，这是我所需要的答案。感谢这本精雕细琢的指南，一旦有机会，我会对它进行测试，并给出结果。我决定按照你的建议使用href而不是JavaScript作为链接，因为它对SEO有影响。代码的历史记录部分会很有用，但我试图实现它，但它不起作用，可能是我的一个错误，我将进行更多的研究@べがらう 什么特别不起作用？一点都没有？它只是改变了url，我加入了一个新的代码，它工作得很好，除了前后导航被破坏，它只是在前后推的时候改变了url<代码>$（“#home_按钮”）。单击（function（）{$（“#module”）.load（“module.php？module=home”）；window.history.pushState（null，null，/home.aspx'）；document.title='UrbanRanks | home'；return false；}）@べがらう 您需要将要还原到页面的代码放在pushState的第一个参数内。我建议只抓取整个HTML页面作为开始。一旦你让它工作起来，你就可以在以后瞎混了。

$('a').on('click', function(){
    var pageurl = $(this).attr('href');

    if (pageurl != window.location){
        window.history.pushState('', '', pageurl);
    }
});

$(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);

    });

});

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);
});