0

我利用Ajax获取数据后,前端实现了局部刷新分页效果。但有个问题是,每次浏览器刷新后会回到第一页,而不是当前停留的页码,这个问题怎么解决呢?

还有就是比如有一个图片网站,第一页是page1.html,总共有1000页难道就要建1000个html文件吗?有什么办法实现只有一个html文件,实现局部内容刷新过后,浏览器网页地址也能跟着改变,并且能支持浏览器刷新呢?

Gomi 455
2018-12-05 提问
5 个回答
2

已采纳

不知道你用的什么分页插件。你分页会有一个当前页的索引吧,每次点击下一页直接跳转到当前页,在地址栏加参数(当前页索引http://127.0.0.1:8020/index.html?page=2),每次进页面判断这个page是否存在,存在就直接显示page页数,不存在默认显示第一页。
下面是如何获取URL参数

    function getUrlParmes(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var reg_rewrite = new RegExp("(^|/)" + name + "/([^/]*)(/|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        var q = window.location.pathname.substr(1).match(reg_rewrite);
        if(r != null){
            return unescape(r[2]);
        }else if(q != null){
            return unescape(q[2]);
        }else{
            return null;
        }
    }
3

你可以试试url后加书签#, 就像类似vue的路由一样
http://localhost/list#1
点击下一页的时候更改#后面的数字, 访问的时候先获取#后面的参数, 若存在直接显示那一页就行了

1

第一个问题:
你应该是通过点击按钮时向后端请求指定页面的数据的,那么在请求的时候必然需要将点击的那个页数传给后端,所以你可以把这个页数保存到sessionStorage里面,实现在页面第一次加载的时候去检测这个储存字段,把它的值给向后端的首次请求,代替默认请求第一页。另外在用这个值去处理分页的样式状态即可。

第二个问题:
数据刷新后浏览器地址跟着改变,可以在数据获取成功后,手动设置hash值来标识页数,这样页面不会改变,也记录下了状态。
实现浏览器刷新,可以在实现了上一步之后,在进入页面的时候前端检查hash值然后再向后端发起请求获取数据。
这样不管是刷新浏览器还是手动键入你制定的带hash的页面,前端都会去请求相应页数的数据,然后获取成功后改变新的hash并保持单页。

1

第一个问题:做成类似vue中的动态路由(hash)的形式;
第二个问题:为什么要有1000个html页面?分页是自己写的,每页的内容,可以使用ajax局部刷新加载出来啊,一个页面就行。

1

其实你这个做一个store本地化就可以了。原因是你刷新的时候,store会被初始化,因为它存在内存中

撰写答案

推广链接