От автора: приветствую вас, друзья. Мы продолжаем цикл статей, посвященных знакомству с фреймворком Yii2. В этой статье мы еще немного поработаем с Yii2 ActiveForm и попробуем отправить данные из формы асинхронно, используя виджет Pjax.
Начнем с того, что же такое Pjax. Данный виджет фреймворка является ни чем иным, как jQuery плагином, который позволяет отправить асинхронный запрос и обновить определенную часть страницы. При этом есть возможность реализовать полноценный переход по ссылкам с обновлением, к примеру, только контентной части. Все остальные элементы страницы (шапка, сайдбар, футер) при этом не будут запрашиваться с сервера. Это, как вы понимаете, значительно ускоряет загрузку страниц.
Для того, чтобы использовать возможности Pjax, необходимо обратиться к соответствующему виджету – yii\widgets\Pjax – и использовать пару его методов: begin и end. Контент между этими методами и будет обновляться динамически. Давайте попробуем обернуть нашу форму в блок Pjax.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?php Pjax::begin() ?> <?php $form = ActiveForm::begin([ 'id' => 'test-form', 'options' => [ 'class' => 'form-horizontal', 'data-pjax' => true, ], 'fieldConfig' => [ 'template' => '<div class="col-md-1">{label}</div><div class="col-md-5">{input}</div><div class="col-md-6">{error}</div>', ], ]); ?> // поля формы <?php ActiveForm::end(); ?> <?php Pjax::end() ?> |
Итак, для того, чтобы форма отправляла данные асинхронно, мы добавили к тегу form атрибут data-pjax. Ну и, конечно же, поместили всю форму между методами Pjax::begin() и Pjax::end(). Если теперь попробовать заполнить форму и нажать кнопку отправки – форма будет отправлена асинхронно, без перезагрузки страницы.
Давайте теперь напишем обработчик в экшене actionTest соответствующего контроллера.
1 2 3 4 5 6 7 8 |
public function actionTest(){ $model = new TestForm(); if(Yii::$app->request->isPjax){ $answer = true; return $this->render('test', compact('model', 'answer')); } return $this->render('test', compact('model')); } |
Здесь мы проверили, поступил ли запрос Pjax – в этом случае к ответу (объект модели) мы добавляем переменную $answer со значением true. В противном случае просто отправляем объект модели. Осталось в представлении проверить наличие дополнительной переменной $answer и сигнализировать об успешной отправке данных. Добавим следующий код перед формой:
1 2 3 |
<?php if(!empty($answer)): ?> <p><code>Данные приняты</code></p> <?php endif; ?> |
После обновления страницы внешне абсолютно ничего не изменится.
Однако если мы заполним форму и нажмем кнопку, то данные будут отправлены асинхронно и перед формой будет выведено соответствующее сообщение.
При этом в консоли Yii Debugger мы увидим выполненный AJAX запрос.
Не очень сложно и очень удобно, не правда ли? На этом сегодня все. Больше о фреймворке вы можете узнать из наших бесплатных или платных уроков. Также создание простейшего блога на Yii2 можно посмотреть в этом цикле уроков.
Комментарии (2)