Pjax多点局部同步加载

优化项目时的踩坑日记,使用Pjax多个局部无刷新同步获取。

前言

做面板项目时有个想法是前端定时更新界面,要满足下列条件:

  • 界面无刷新
  • 不在前端调用API,防止API keys泄露
  • 进度条显示定时执行更新任务

于是第一个想到就是用Pjax了,引用官方手册的介绍:

Pjax的工作原理是通过ajax从服务器端获取HTML,在页面中用获取到的HTML替换指定容器元素中的内容。

但是面板上有许多个模块,每个模块又不在同一个div层内,且大的div层又同时包括了很多个不需要重复刷新的模块。

那么问题来了,怎样才能使这些多个局部的小模块单独同步刷新呢?

第一个问题 - 超时全局刷新

写了第一个$.pjax.reload,发现第一个问题就是,还没等pjax返回数据,页面整体就闪了一下,全局刷新了。

Pjax踩坑日记

这让我一度认为我是不是理解错了Pjax的概念,可是官方文档是这么写的啊….

最后的解决方案是:

1
2
3
$(document).on('pjax:timeout', function(event) {
event.preventDefault()
});

原因是pjax默认timeout时间为:650 .
超过了这个时间还没有返回结果,页面会默认全局刷新。

第二个问题 - 两个pjax,前者自动取消

当两个pjax同时reload时,前一个pjax会自动取消(canceled),只有最后的pjax才能顺利执行

Pjax踩坑日记

再次一度怀疑自己…

解决方案是给pjax添加配置项{async:false},这个配置可以使每个pjax执行完后再执行下一项pjax。

1
2
$.pjax.reload('#poem-content',{async:false});
$.pjax.reload('#server-content',{async:false});

Pjax踩坑日记

(这不坑爹吗,文档也没写啊)

结语

目前还是一种土方法,如果有更好,更优雅的解决方法还请各路大神指点一二。