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

Этим кодом мы зарегистрировали некоторый 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