Pjax 在Yii2中的使用(利用H5 新增API pushState+AJAX)

发送到手机
使用"扫一扫"即可发送至手机

介绍

目前已经有http://github.com/, http://plus.google.com, http://www.welefen.com等网站已经使用Pjax。

pjax是对ajax + pushState的封装,让你可以很方便的使用H5最新的pushState特性。

同时支持了缓存和本地存储,下次访问的时候直接读取本地数据,无需在次访问。

并且展现方式支持动画技术,可以使用系统自带的动画方式,也可以自定义动画展现方式。

如何使用


在Yii2中Pjax的一点用法

Pjax::begin(['id'=>'countries']);
GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    'columns' => [
        'id','name','content'
    ]
]);
Pjax::end();

定义好之后就可以绑定事件到具体的按钮上调用pjax的方法了。比如想更新刷新页面

$.pjax.reload({container:"#countries"});

如果想在reload时给服务器传参数可以这样

$.pjax.reload({container:"#countries",data: form.serialize()});

form表单的ajax提交也可以这样调用

$.pjax.submit(event,"#countries");

在实际项目中我们可能还会需要对ajax请求的的各个参数和事件做处理,这里讲几个认为比较常用的地方

var container = $("#countries");//容器
container.on('pjax:beforeSend',function(args){
    ajax请求之前调用,返回false中断ajax请求
})
container.on('pjax:error',function(args){
    ajax请求失败之后调用
})
container.on('pjax:success',function(args){
    ajax请求成功之后调用
})
Pjax 在Yii2中的使用(利用H5 新增API pushState+AJAX)

Pjax 在Yii2中的使用(利用H5 新增API pushState+AJAX)

分享: