От автора: приветствую вас, друзья. Мы продолжаем цикл статей, посвященных знакомству с фреймворком Yii2. В этой статье мы рассмотрим тему Yii2 AJAX, т.е. вопрос асинхронных запросов. В качестве примера мы реализуем отправку формы асинхронно методом POST, без перезагрузки страницы.
В современном вебе отправка и получение данных без перезагрузки страницы давно уже стала признаком хорошего тона. В этом случае страница не перегружается и все работает куда быстрее. Да и выглядит этот процесс достаточно привлекательно, сопровождаясь зачастую сопутствующими анимационными эффектами.
В данном уроке мы возьмем в качестве примера тестовую форму, которую создавали в одной из предыдущих статей, и попробуем отправлять эту форму без перезагрузки страницы, т.е. воспользуемся возможностями ajax-запросов.
Для начала нам необходимо написать простейший скрипт, который будет отправлять этот запрос. Давайте откроем необходимое представление — views\test\page.php — и добавим в него следующий код в конце файла:
|
1 2 3 4 5 6 7 8 9 10 |
<?php $js = <<<JS $('form').on('beforeSubmit', function(){ alert('Работает!'); return false; }); JS; $this->registerJs($js); ?> |
Этим кодом мы зарегистрировали некоторый JavaScript код для конкретного вида. Данный код призван перехватить отправку формы и выполнить наш собственный JS код — в данном случае вывести в модальном окне сообщение «Работает!». Проверим, так ли это.
Хорошо, мы нигде не ошиблись, сообщение показывается и стандартная отправка формы при этом не происходит. Теперь давайте добавим в JS код запрос ajax.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$js = <<<JS $('form').on('beforeSubmit', function(){ var data = $(this).serialize(); $.ajax({ url: '/test/page', type: 'POST', data: data, success: function(res){ console.log(res); }, error: function(){ alert('Error!'); } }); return false; }); JS; |
И примем запрос в экшене контроллера:
|
1 2 3 4 5 6 7 8 9 10 11 |
public function actionPage() { $form_model = new TestForm(); if(\Yii::$app->request->isAjax){ return 'Запрос принят!'; } if($form_model->load(\Yii::$app->request->post())){ var_dump($form_model); } return $this->render('page', compact('form_model')); } |
Осталось протестировать отправку формы асинхронно.
Все получилось. Ответ от сервера к нам пришел и перезагрузки страницы при этом не произошло. Это был простейший случай использования AJAX во фреймворке. На этом мы сегодня остановимся. Больше о фреймворке вы можете узнать из наших бесплатных или платных уроков. Также создание простейшего блога на Yii2 можно посмотреть в этом цикле уроков.
Комментарии (3)