Yii2 AJAX

Yii2 AJAX

От автора: приветствую вас, друзья. Мы продолжаем цикл статей, посвященных знакомству с фреймворком Yii2. В этой статье мы рассмотрим тему Yii2 AJAX, т.е. вопрос асинхронных запросов. В качестве примера мы реализуем отправку формы асинхронно методом POST, без перезагрузки страницы.

В современном вебе отправка и получение данных без перезагрузки страницы давно уже стала признаком хорошего тона. В этом случае страница не перегружается и все работает куда быстрее. Да и выглядит этот процесс достаточно привлекательно, сопровождаясь зачастую сопутствующими анимационными эффектами.

В данном уроке мы возьмем в качестве примера тестовую форму, которую создавали в одной из предыдущих статей, и попробуем отправлять эту форму без перезагрузки страницы, т.е. воспользуемся возможностями ajax-запросов.

Для начала нам необходимо написать простейший скрипт, который будет отправлять этот запрос. Давайте откроем необходимое представление — views\test\page.php — и добавим в него следующий код в конце файла:

<?php
$js = <<<JS
 $('form').on('beforeSubmit', function(){
 alert('Работает!');
 return false;
 });
JS;

$this->registerJs($js);
?>

Yii2 AJAX

Фреймворк YII2. Быстрая разработка с современным PHP фреймворком

Узнай тонкости современной веб-разработки с помощью фреймворка YII2

Узнать подробнее

Этим кодом мы зарегистрировали некоторый JavaScript код для конкретного вида. Данный код призван перехватить отправку формы и выполнить наш собственный JS код — в данном случае вывести в модальном окне сообщение «Работает!». Проверим, так ли это.

Yii2 AJAX

Хорошо, мы нигде не ошиблись, сообщение показывается и стандартная отправка формы при этом не происходит. Теперь давайте добавим в JS код запрос ajax.

$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;

И примем запрос в экшене контроллера:

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'));
}

Осталось протестировать отправку формы асинхронно.

Yii2 AJAX

Все получилось. Ответ от сервера к нам пришел и перезагрузки страницы при этом не произошло. Это был простейший случай использования AJAX во фреймворке. На этом мы сегодня остановимся. Больше о фреймворке вы можете узнать из наших бесплатных или платных уроков. Также создание простейшего блога на Yii2 можно посмотреть в этом цикле уроков.

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Фреймворк YII2: теория и первая практика

Овладейте азами фреймворка Yii2 за 5 дней!

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree