作者：云中之锦书 | 来源：互联网 | 2020-08-10 19:56
前言：现在前后端基本都是通过ajax实现前后端接口数据的交互，但是，ajax有个小小的劣势，即：不支持浏览器“后退”和“前进“键。但是，现在我们可以通过H5的histroy属性解决ajax在交互请求的这个小bug。事件描述：H5增加了一个事件window.onpopstate，当用户点击那两个按钮就会触发这个事件。但是光检测到这个事件是不
以下内容是关于Jquery.history解决ajax的前进后退问题，具体详情请看下文。本文的前提是基于后台的，所以这里不会考虑seo的问题。同时，基于后台的管理系统，也不需要被收藏，所以也不会考虑刷新的这种类似直接敲网址的情况！！！
事件描述：
H5增加了一个事件window.onpopstate，当用户点击那两个按钮就会触 发这个事件。但是光检测到这个事件是不够的，还得能够传些参数，也就是说返回到之前那个页面的时候得知道那个页面的pageIndex。通过 history的pushState方法可以做到，pushState(pageIndex)将当前页的pageIndex存起来，再返回到这个 页面时获取到这个pageIndex。
window.history.pushState描述：
window.history.pushState(state, title, url);
state对象：是一个Javascript对象，它关系到由pushState()方法创建出来的新的history实体。用以存储关于你所要插入到历史 记录的条目的相关信息。State对象可以是任何Json字符串。因为firefox会使用用户的硬盘来存取state对象，这个对象的最大存储空间为640k。如果大于这个数 值，则pushState()方法会抛出一个异常。
title：firefox现在回忽略这个参数，虽然它可能将来会被使用上。而现在最安全的使用方式是传一个空字符串，以防止将来的修改。
url：用来传递新的history实体的URL，浏览器将不会在调用pushState()方法后加载这个URL。也许会过一会尝试加载这个URL。比如在用户重启了浏览器后，新的url可以不是绝对路径。如果是相对路径，那么它会相对于现有的url。新的url必须和现有的url同域，否则pushState()将抛出异常。这个参数是选填的，如果为空，则会被置为document当前的url。
直接贴代码：
( loadData= pageIndex:window.history.state===?1 init: .getData( getData: that= type:&＃39;post&＃39; url:&＃39;./data/getMovices&＃39;+pageIndex+&＃39;.json&＃39; dataType:&＃39;json&＃39; async: success: renderDom: bookHtml= "
" bookHtml += "
" + "
" $(&＃39;body&＃39; nextPage: that= $(document).on("click",".nextPage", that.pageIndex++ window.history.pushState({page:that.pageIndex}, window.addEventListener("popstate", page=0 (event.state!== page= console.log(&＃39;page:&＃39;+ console.log(&＃39;page:&＃39;+ loadData.pageIndex= })(jQuery,window,undefined);
通过直接在html页面调用js文件就可看到运行结果。
运行结果：
以上就是history解决ajax出现的问题的详细内容，更多请关注 第一PHP社区 其它相关文章！
京公网安备 11010802041100号