node+pjax实现不刷新跳转

Posted 2020-09-23 meetqy

做前端的都知道如果通过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；这种事前端做的太多了，何乐而不为呢？