1. 程式人生 > >使用ajax重新整理頁面後,如何後退

使用ajax重新整理頁面後,如何後退

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);   // 再次改變內容
        });