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 ]); }
根据如上可以实现分页无刷新现象
相关推荐
宇智波鼬 2018-09-20
aspshipin 2011-06-28
ivhong 2016-03-05
yaasshole 2014-01-31
xiaoxingyun 2016-03-06
WatermelonMk 2019-04-04
前端外刊评论 2018-02-02