yii2 Pjax 的使用

果然啊,有些坑还是要自己踩过才懂是什么坑。

Yii2 提供了一个 Pjax widget 帮助我们使用 Pjax

  1. 引入 Pjax
    <?php 
    use yii\widgets\Pjax;
    ?>
  2. 添加 Pjax 包裹住需要更新的内容
    <?php Pjax::begin(); ?>
    需要更新的内容
    <?php Pjax::end(); ?>

超链接使用 Pjax

本例实现无刷新页面点击取出随机数,所有被 Pjax 包扩的请求,都会发送 Pjax 请求

// View 代码
<?php Pjax::begin()?>
    <?=Html::a('取随机数', ['site/index'], ['class' => 'btn btn-primary'])?>
    <h3>获取的随机数为:<em><?=$rand?></em></h3>
    <?php Pjax::end()?>
// 控制器代码
public function actionIndex()
    {
        return $this->render('index',['rand' => rand()]);
    }

form 提交表单数据

输入名字以后,点击展示,无刷新显示出来
注意一定要写 ['data-pjax' => ''] 属性

<?php Pjax::begin();?>
        <?=Html::beginForm(['site/index'], 'post', ['data-pjax' => ''])?>
        <?=Html::textInput('name')?>
        <?=Html::submitButton('展示')?>
        <?= Html::endForm()?>
        <h2>输入的数据:<?=$name?></h2>
    <?php Pjax::end();?>
public function actionIndex()
    {
        $name = Yii::$app->request->post('name');
        return $this->render('index',['name' => $name]);
    }

ActiveForm 表单同理,属性加上 'options' => ['data-pjax' => ''],

如果不想提交的时候改变顶部 url

enablePushState 设置 false
Pjax::begin(['enablePushState' => false])

发表评论