使用ajax刷新页面后，如何后退

最新推荐文章于 2025-05-17 10:43:26 发布

snow_small

最新推荐文章于 2025-05-17 10:43:26 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： ajax 后退 pushState onpopstate

本文链接：https://blog.csdn.net/snow_small/article/details/79164341

js 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何利用JavaScript History API中的pushState和replaceState方法来优化前端路由，通过实例展示了如何在不刷新页面的情况下更新URL，并监听浏览器前进后退事件以保持应用状态一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、使用pushState(data, title, url)将url加入到堆栈中，data为要给state的数据，title页面标题可为空，url是要加入的

2、replaceState(data, title, url)和上一个参数相同，不同点在于他是改变当前的url，且不会让state.length加一

2、当后退时，调用onpopstate()函数，返回前一个url

3、具体实现

（1）在ajax中，

var num = Math.random().toString().replace('.', '%');
        $('#project').change(function() {
            $.post("{{ url('project') }}/"+$('#project').val(),
                {'_token': '{{ csrf_token() }}'}, function(data) {
                    $('#body').html(data);
                    window.history.pushState(data, '', "{{ Url('index') }}"+"?page="+num);  // 将url加入堆栈
                });
        });

（2）当后退时，自动会调用onpopstate()函数，当history.back(),go()都会调用

window.addEventListener('popstate', function(event) {   // 点后退时
            var state = event.state;    // 得到上个url的页面数据
            location.href = "{{ url('index') }}"+"?page="+state;
            $('#body').html(state);   // 再次改变内容
        });