首页 > 代码库 > node+pjax实现不刷新跳转

node+pjax实现不刷新跳转

做前端的都知道如果通过a标签去访问跳转到某一个页面,浏览器会自动刷新。那么如何实现不刷新跳转?

html5的出现让我们可以实现不刷新跳转页面。主要使用的方法:history.pushState(data,str,url) 。不知道的百度 h5  history api。

现在不用自己来造轮子,我们直接引入jquery.pjax。使用方法 https://github.com/defunkt/jquery-pjax/

先来看我的前端代码:

//$(‘document‘).pjax(‘html元素‘,‘需要跟新的容器‘)  给html元素绑定pjax传输的方法
 $(document).pjax(‘.header a,.container a,#divSearchPanel input‘, ‘.container‘, {
     fragment: ‘.container‘,
     timeout: 1500
 });

 //用ajax来实现
 //pjax请求带pjax header
 $.ajax({
     url: a.attr(‘href‘)ajaxUrl,
     type: ‘GET‘,
     headers: {‘x-pjax‘: true},
     success: function (data) {
         //localStorage ...
         history.pushState(‘‘, ‘‘, url);
         //containor 填充
     }
 });

 

这个时候所有通过a标签发送的请求header里面都会出现x-pjax:true;

技术分享

前端部分完成,开始来部署后台;

正常的路由部分省略,直接用express安装就好

var pjax = require(‘express-pjax‘);
app.use(pjax());
router.get(‘/‘,function (req,res) {
    if (req.headers[‘x-pjax‘]) {//如果x-pjax为true使用res.renderPjax()返回页面
        res.renderPjax(‘msg‘);
    }
    res.render(‘msg‘);
});

技术分享

这样看来,其实并没有想象那么复杂,我想,不是对IE789有特别要求的,都可以考虑使用,为了兼容也可以先判断是否支持pushState,决定是否将链接转化为pjax;这种事前端做的太多了,何乐而不为呢?  

 

  

node+pjax实现不刷新跳转