weixin_33694172 2016-06-29 04:02 采纳率: 0%
浏览 33

在Ajax调用上的pushState?

My client is tormenting me to be able to go back to a 'previous page' using the browser back button. The thing is that this 'pages' are being called via Ajax to a modal window that displays the content. I'm doing an ajax call and I found that pushState will be my solution, but I really don't get it. I found stuff where there's not even a bit of ajax, it's all javascript.. So, what should I do to add pushState to an ajax call? Is that even possible? Or should I just a find a way to make it work with Ajax?

I found this thing called Pjax but I really don't get it. My ajax call looks something like this;

$(function() {
    $('.w-container .w-nav-menu a').click(function() {
        var $linkClicked = $(this).attr('href');
        var $pageRoot = $linkClicked.replace('#', '');
        if (!$(this).hasClass("active")) {
            $(".w-container .w-nav-menu a").removeClass("active");
            $(this).addClass("active");
            $.ajax({
                type: "POST",
                url: "./PATH/load.php",
                data: 'page='+$pageRoot,
                dataType: "html",

                beforeSend: function(){
                        $('#canvasloader-container.wrapper').show();
                    },
                complete: function(){
                        $('#canvasloader-container.wrapper').hide();
                    },                
                success: function(msg){
                    if((msg))
                    {
                        $('.content').html(msg);
                        $('.content').hide().fadeIn();
                    }
                }

            });
        }
    event.preventDefault();
});

I'm sorry if someone else already created something like this, but I didn't find anything useful

  • 写回答

1条回答 默认 最新

  • Memor.の 2016-06-29 04:34
    关注

    You can do a pushState at any stage you'd like in the code you provided, depending on when do you want the history to be manipulated.

    You can just do history.pushState([data], [title], [url]); (with appropriate values as parameters) just after a successful ajax form return and before replacing the html content like this:

    success: function(msg){
        if((msg))
        {
            history.pushState([data], [title], [url]); // replace with appropriate values as parameters
            $('.content').html(msg);
            $('.content').hide().fadeIn();
        }
    }
    

    There might be an issue depending on the UX you've set up, if a user is accessing pages continuously by ajax calls and there are no URLs to reflect the previous page or 'state' in that case, then this solution probably won't work for you.

    History manipulation functions like pushState only change the browser history, they don't control what happen when someone clicks the 'back' button.

    If there are no pages being loaded with URLs in your setup then you might need to control what happens when a user clicks the 'back' button, by doing another ajax call and loading the previous content (you got to keep track of the changes in content). If that is your scenario, this might help you getting started: https://stackoverflow.com/a/25806609/4283725

    评论

报告相同问题?

悬赏问题

  • ¥15 python天天向上类似问题,但没有清零
  • ¥30 3天&7天&&15天&销量如何统计同一行
  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 C#调用python代码(python带有库)
  • ¥15 矩阵加法的规则是两个矩阵中对应位置的数的绝对值进行加和
  • ¥15 活动选择题。最多可以参加几个项目?
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)