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；这种事前端做的太多了，何乐而不为呢？　　

更多原创文章访问：meetqy.com