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

node+pjax实现不刷新跳转

2024-10-09 18:03:39   216人阅读

做前端的都知道如果通过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实现不刷新跳转


联系
我们