Yii 使用pjax

之前我们已经简单的学习过了pjax:https://www.wj0511.com/site/d...,今天我们来学习下在Yii框架中使用pjax,Yii自带了pjax,使用起来十分的方便

一:简单实现pjax

view:

<?php
use yii\widgets\Pjax;
use yii\bootstrap\Html;
?>
<?php Pjax::begin([
    'enablePushState' => false,//更新数据保持url不变
    'timeout' =>5000//超时时间
]); ?>
<?= Html::a("点击事件", ['pjax/pjax'], ['class' => 'btn btn-lg btn-primary']) ?>
<h1>刷新的时间为: <?= $time ?></h1>
<?php Pjax::end(); ?>

controller:

public function actionPjax()
{
return $this->render('pjax', ['time' => date('Y-m-d H:i:s')]);
}

根据如上代码可以实现:

当点击点击事件按钮时,刷新的时间数据发生变化,页面不会进行刷新

二:form表单提交数据pjax实现

view:

<?php
use yii\widgets\Pjax;
use yii\bootstrap\Html;
?>
<?php Pjax::begin([
    'enablePushState' => false,//更新数据保持url不变
    'timeout' =>5000//超时时间
]); ?>
<?=Html::beginForm(
        ['pjax/form-pjax'],//from表单提交地址
        'post',//提交方式
        ['data-pjax' => '']//使用pjax形式提交数据
)?>
<?=Html::textInput('data')?>   <!--输入框-->
<?=Html::submitButton('按钮')?>  <!--按钮-->
<?= Html::endForm()?>
<h2>输入的数据为:<?= $data ?></h2>
<?php Pjax::end();?>

controller:

public function actionFormPjax()
{
    $data = Yii::$app->request->post('data', '');
    return $this->render('form-pjax', [
        'data' => $data
    ]);
}

根据如上代码可以实现:

当点击按钮时,输入的数据根据你输入的数据发生变化,页面不会进行刷新

三:pjax+GridView实现分页操作

view:

<?php
use yii\widgets\Pjax;
use yii\grid\GridView;
?>
<?php Pjax::begin([
        'enablePushState' => false,//更新数据保持url不变
        'timeout' =>5000//超时时间
]); ?>
<?= GridView::widget([
    'dataProvider' => $dataProvider,
])?>
<?php Pjax::end();?>

controller:

public function actionPagePjax()
{
    $model = Area::find();//查询数据
    $dataProvider = new ActiveDataProvider([
        'query' => $model,
        'pagination' => [
            'pageSize' => 10,//设置每页显示数
        ],
    ]);
    return $this->render('page-pjax', [
        'dataProvider' => $dataProvider
    ]);
}

根据如上可以实现分页无刷新现象

相关推荐