PJAX实现页面无刷新跳转及加载数据(浏览器可回退前进)

什么是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请求当前浏览器其对应地址的页面进行加载。此时就能够实现刷新再次显示原页面的信息。

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值