雅荷心语博客几年前就试用过pjax 这个插件, 当时折腾了一会儿没弄明白也就抛弃了, 这几天突然想起来, 查了一下文档突然就开朗了!刚才部署到了博客上,实际很简单, 目前就几行代码在生效!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$(function() { console.log('pjax init'); $(document).pjax('a[target!=_blank]', '.content-wrap', { fragment:'.content-wrap', timeout:8000 }); $(document).on('submit', 'form', function(event) { $.pjax.submit(event, '.content-wrap', { fragment: '.content-wrap', timeout: 6000 }) }); $(document).on('pjax:send', function() { //pjax链接点击后显示加载动画； $(".pjax_loading").css("display", "block");}); $(document).on('pjax:complete', function() { //pjax链接加载完成后隐藏加载动画； $(".pjax_loading").css("display", "none"); }); }); |
网上一堆的教程, 在说前端怎么怎么处理怎么处理, 服务端怎么怎么处理, 实际上不需要了!
我当时的思路是, 我拦截所有的a链接请求, 点击a链接时候获取url, 然后使用ajax 获取整个目标页面的html内容,
然后插入到整个页面里(前提条件是所有的css和js都是全局引入,每个页面都相同);
这样就实现了不刷新打开下一页的问题, 但是后来想想, 不管能不能实现, 应该还要处理,浏览器的前进后端等等…
刚好pjax 就帮我们处理好了这些!
pjax 结合 pushState 和 ajax 技术， 不需要重新加载整个页面就能从服务器加载 Html 到你当前页面，这个 ajax 请求会有永久链接、title 并支持浏览器的回退/前进按钮。
pjax 项目地址在 https://github.com/defunkt/jquery-pjax 。
具体效果可以查看本博客~
pjax 的中文文档地址 http://bsify.admui.com/jquery-pjax/
具体的事件和参数都可以直接查看此文档!
