使用ajax重新整理頁面後,如何後退
阿新 • • 發佈:2019-01-25
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); // 再次改變內容
});