什么是PJAX?
https://github.com/defunkt/jquery-pjax
https://my.oschina.net/sub/blog/123447
https://www.oschina.net/question/12_48388
最简单的pajx调用方式:
$.pjax({
url: '访问后台的url',
container: '需刷新的div等容器的id'
});
当然pajx还提供了各种函数和回调:
参考地址:
http://www.qingzz.cn/pjax_reference_translation
pjax可以很好的实现无刷新类似ajax的功能,并且可以进行浏览器地址的更换和刷新,并且支持浏览器的回退和前进。
实际操作中出现问题:
pajx在浏览器回退和前进是无任何问题的。但如果你进行刷新或F5操作。那么加载出来的页面仅仅为地址栏后台请求出来的页面:比如,如果你的菜单栏项是通过pjax(这里请求的页面dom为 a/list.html)加载对应的内容到指定div(这里假设为div1)。那么如果进行了刷新或F5操作后页面出现的仅仅为 a/list.html页面的布局和信息。如何解决?
pajx在提交的头信息中包括了 x-pjax: true
1.服务器端判断是否为x-pjax请求
服务器后台可通过该字段来判断是否为x-pjax请求。或者自己定义好参数传到后台来区分是否是x-pjax的请求。
2.如果不为x-pjax请求则转发到首页地址
如果你菜单项的首页为index.html 则转发到该页面。那么在刷新后就能够跳转到首页。包含了菜单项等。
3.转发到首页但是并不是对应的页面信息(如浏览器刷新 a/list.html),如何将a/list.htm的信息加载出来?
需要再次提到:$.pjax({ url: '访问后台的url', container: '需刷新的div等容器的id' });
index写上该方法,注意:此时url的参数不填。
$.pjax({ url: '', container: '需刷新的div等容器的id' });
不填的原因是:在请求时会默认为浏览器的当前地址进行执行。
那么在判断不为pjax请求时转发到首页index.htm页面时,立即又触发了pjax请求当前浏览器其对应地址的页面进行加载。此时就能够实现刷新再次显示原页面的信息。