[js]对Ajax的后退处理

[Cuuube]

ajax后不能直接改变历史记录。因此需要某些方法。 此处记录我学会的第一种方法。

function setHistory(data) {
    //将当前一个数据压入历史记录数据
    //参数：（保存的data，title无用，更新的url）
    window.history.pushState(data, "", '?' + $.param(data));
}
//设定后退事件
window.onpopstate = function() {
    //得到后退到上次保存的数据
    var stateData = window.history.state;
    //通过ajax请求上次传输的数据，并重新渲染。相当于回到了上次状态
    $.ajax({
        type: 'get',
        url: '/api/to/somepath',    //上次请求的url。
        data: stateData,
    }).done((res) => {
        //将数据渲染到页面上
        doSth(res.data, true);
    });
}

• 关键语句：
  • window.history.pushState(data, title, url) 设置无刷新url并压入数据
  • window.onpopstate() 事件
  • window.history.state 取得压入的数据