为ajax添加前进后退功能–jquery.pjax.js

常规用的ajax可以实现局部刷新，但是使用浏览器后退功能并不能显示上一次的数据

这里推荐jquery.pjax.js插件是基于：jquery+html5的history.pushState+ajax=jquery.pjax.js

效果如：点击用ajax加载出不同的数据，也可以使用后退键倒退显示出之前的数据

https://sdeno.com/wp-content/uploads/2016/05/pjax20191102222141.gif

//——————-以下—koa2 完整案例————————-

前端：

<script src="http://www.xgllseo.com/zp/pjax/jquery-1.8.3.min.js"></script>
<script src="http://www.xgllseo.com/zp/pjax/jquery.pjax.js"></script>

<body>

<a class="a_pjax" href="/1">内容1</a>  <!--请求的接口数据 {xx:1}-->
<a class="a_pjax" href="/2">内容2</a>  <!--请求的接口数据  {xx:2}-->

<div id="pjax-container">
  这里是默认显示的内容
</div>

<script>

    $(document).pjax('.a_pjax', {
      type:'get',
      push:true,  //默认是true就是使用pjax,如果设置false就使用ajax方式了（一般默认）
      replace:false, //默认是false也就是可以使用pjax的后退功能，设置true后退功能就失效（一般默认）
      container:'#pjax-container', //内容插入到此容器的内部
      // fragment:'#wo',  //筛选指定内容插入到容器中,选中把id为wo的容器里面的内容
      //timeout:650, //如果超出自定时间，就按默认方式跳转
      dataType:"html" //json  xml html text jsonp
    });


    //请求接口成功后 回调
    $(document).on('pjax:success',function(data, status, xhr, options){
       console.log(data);
      $('#pjax-container').text(JSON.parse(status).xx);  //{xx:'1'}
       console.log(xhr);
       console.log(options);
    });


</script>
</body>

后端：

router.get('/:id?', async (ctx, next) => {
  
  if(ctx.params.id==1){
   // ctx.type='json';
    ctx.body={xx:'1'};
  }else if(ctx.params.id==2){
   // ctx.type='json';
    ctx.body={xx:'2'};
  }else{
    await ctx.render('index', {
      title: 'Hello Koa 2!'
    })
  }

})

//——————–以上–koa2 完整案例————————-

使用条件：

1，jquery 1.8.x版本以上

2，浏览器兼容IE10以上

浏览器兼容性表：

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
replaceState, pushState	5	4.0 (2.0)	10	11.50	5.0
history.state	18	4.0 (2.0)	10	11.50	6.0

具体的pushState可以参考：

张鑫旭：http://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/

jquery.pjax.js官网：https://github.com/defunkt/jquery-pjax

$.pjax.disable(); //禁用pjax
$.support.pjax; //检测浏览器是否支持pjax
$.pjax.defaults.timeout = 1200 //通过全局方式修改参数

$(document).pjax('#a_pjax', {
  type:'post',
  push:true, //默认是true就是使用pjax,如果设置false就使用ajax方式了（一般默认）
  replace:false, //默认是false也就是可以使用pjax的后退功能，设置true后退功能就失效（一般默认）
  container:'#pjax-container', //内容插入到此容器的内部
  fragment:'#wo', //筛选指定内容插入到容器中,选中把id为wo的容器里面的内容
  timeout:650, //如果超出自定时间，就按默认方式跳转
  dataType:"html"
});

事件	取消	参数	说明
pjax链接事件的生命周期
pjax:click	✔︎	options	链接被激活的时候触发；取消的时候阻止pjax
pjax:beforeSend	✔︎	xhr, options	可以设置XHR头
pjax:start		xhr, options
pjax:send		xhr, options
pjax:clicked		options	pjax通过链接点击已经开始之后触发
pjax:beforeReplace		contents, options	从服务器端加载的HTML内容完成之后，替换当前内容之前
pjax:success		data, status, xhr, options	从服务器端加载的HTML内容替换当前内容之后
pjax:timeout	✔︎	xhr, options	在`options.timeout`之后触发；除非被取消，否则会强制刷新页面
pjax:error	✔︎	xhr, textStatus, error, options	ajax请求出错；除非被取消，否则会强制刷新页面
pjax:complete		xhr, textStatus, options	无论结果如何，都在ajax响应完成后触发
pjax:end		xhr, options
浏览器前进后退事件的生命周期
pjax:popstate			`direction`事件的属性: “back”/”forward”
pjax:start		null, options	内容替换之前
pjax:beforeReplace		contents, options	在用缓存中的内容替换HTML之前
pjax:end		null, options	替换内容之后
pjax:callback		null, options	页面脚本加载完成后（Admui项目）

//类似于pjax的回调函数

$(document).on('pjax:beforeSend',function(e){
 alert(1); //在进行pjax前先执行
});

$(document).on('pjax:success',function(e){
 $('#pjax-container div:eq(1)').remove(); // 成功后的回调
});

演示地址：https://sdeno.com/zp/pjax/1.html 可以在ajax的基础上使用浏览器的前进后退功能了

为ajax添加前进后退功能--jquery.pjax.js

//类似于pjax的回调函数