简介
本文介绍如何使用HTML5中的history
API,在列表页的AJAX请求中保存历史记录和页面状态,以及如何在回退时正确恢复页面状态。
前置条件
- 已经掌握AJAX调用后端接口,可成功加载并展示列表数据。
- 已经掌握HTML5的
history
API基础用法。
保存历史记录和页面状态
在列表页中,我们通常会实现一些复杂的筛选或搜索功能。这些操作往往会触发AJAX请求,并且会改变列表页面的内容和状态。而且这些操作并不是每个用户都需要完成的。所以为了提供更好的用户体验,我们需要做到以下两点:
- 当用户执行筛选或搜索操作后,可以通过浏览器的“后退”按钮回到上一个页面状态。
- 当用户直接通过链接进入列表页时,可以根据URL的参数自动恢复页面状态。
我们使用history
来实现上面两点。
function loadListAjax() {
// 调用后端接口,加载列表数据
// ...
// 记录当前页面状态的相关数据
const state = {
page: 1, // 当前页码
keyword: '', // 搜索关键词
sort: 'asc', // 排序方式,升序/降序
};
// 使用history.pushState将当前页面状态压入历史记录
const url = '/list?' + $.param(state); // 使用jQuery.param将object转为query string
history.pushState(state, null, url);
}
当用户执行了列表筛选或搜索操作时,我们可以先获取当前的页面状态,然后使用history.pushState
保存到历史记录中。这里需要注意,history
API只会保存state
对象中的数据,而不会保存页面状态的HTML内容。所以我们需要将页面状态的相关数据转换为一个JavaScript对象,然后通过history.pushState
将其保存到历史记录中。
恢复页面状态
我们已经将页面状态保存到了history
的state
对象中,接下来就是如何在页面回退时正确地恢复页面状态了。
$(window).on('popstate', function(e) {
if (e.state) {
// 根据state对象中的数据,来重新加载列表数据
const state = e.state;
loadListAjax(state.page, state.keyword, state.sort);
} else {
// 恢复默认状态
loadListAjax(1, '', 'asc');
}
});
当用户回退到上一个页面状态时,会触发window
对象的popstate
事件。我们可以通过监听该事件,在事件回调中获取到当前的state
对象。
如果state
不为null
,则说明当前浏览器历史记录中有我们保存的页面状态。此时,我们需要根据state
对象中保存的数据,来重新调用列表数据加载函数,然后重新展示列表数据。
如果state
为null
,则说明当前回到了页面的最开始状态。我们需要调用默认的列表数据加载函数,来重新加载并展示第一页数据。
示例说明
我们已经实现了保存历史记录和页面状态,以及在回退时恢复页面状态这两个核心功能。接下来我们通过两个示例,来具体说明如何在实际项目中使用。
示例一:多条件筛选列表
在使用场景中,我们可能有多个选项,如分类选项、日期选择、状态筛选等,用户可根据这些选项来进行检索。同时,每个选项又可以进行多选或输入,非常灵活。
在这种情况下,使用history
API可以非常优雅地解决这个问题。每次检索都是一个新的页面状态,我们可以将之压入浏览器历史栈中,而且回退时完美恢复搜索条件,让用户无感知体验以往搜索历程。
function loadListAjax(opts) {
// 调用后端接口,加载列表数据
// ...
// 记录当前页面状态的相关数据
const state = {
page: opts.page || 1, // 当前页码
categoryIds: opts.categoryIds, // 分类Ids
status: opts.status, // 状态
startDate: opts.startDate, // 开始时间
endDate: opts.endDate, // 结束时间
};
// 使用history.pushState将当前页面状态压入历史记录
const url = '/list?' + $.param(state); // 使用jQuery.param将object转为query string
history.pushState(state, null, url);
}
示例二:表格分页
在常规的表格分页中,我们实现上下页,以及跳转到指定页的功能时,使用history
API可以非常优雅地进行历史记录保存和回退恢复。
// 改变页面url及页面状态
function changeTablePage(pageNum) {
// 调用后端接口,加载列表数据
// ...
// 记录当前页面状态的相关数据
const state = {
page: pageNum || 1, // 当前页码
pageSize: 20, // 分页大小
};
// 使用history.pushState将当前页面状态压入历史记录
const url = '/table-list?' + $.param(state); // 使用jQuery.param将object转为query string
history.pushState(state, null, url);
}
// 此处初始化时,从URL中解析出数据并改变页面
$(document).ready(function() {
const urlParams = new URLSearchParams(window.location.search);
const page = urlParams.get('page');
changeTablePage(page);
});
// 监听浏览器前进后退事件
$(window).on('popstate', function(e) {
if (e.state) {
// 根据state对象中的数据,来重新加载列表数据
const state = e.state;
changeTablePage(state.page);
} else {
// 恢复默认状态
changeTablePage(1);
}
});
结语
使用history
API,可以非常优雅地在列表页中保存历史记录和页面状态,并在回退时自动恢复页面状态。通过本文的介绍,相信您已经学会了如何在实际项目中应用这种特性。但是在实际开发时,还需要注意页面性能和SEO等方面的问题。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:history保存列表页ajax请求的状态使用示例详解 - Python技术站