使用pjax实现无刷新更改页面url


我们都知道ajax给浏览器带来了异步加载的能力,在数据校验、局部刷新等方面提升了用户体验,但同时存在如下问题:

1. 可以无刷新改变页面内容,但无法改变页面URL
2. hash的方式不能很好的处理浏览器的前进、后退等问题

为了解决传统ajax带来的问题,HTML5里加强了history API,加入了pushState、replaceState接口和popstate事件。这里就不详细介绍了,没有这方面知识的同学建议先看一下相关的资料。

pjax插件封装了pushState和ajax操作,为我们提供了一个开发这这类web应用的简单方法,具体步骤如下:

定义需要局部更新的容器

<div id="container"></div>
初始化pjax,监听URL

pjax-demo

这只是pjax最基础的功能,pjax提供了丰富的api,请访问:jquery-pjax


« 
» 

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3