В этой статье мы рассмотрим работу с AJAX в Yii 2 на примере оправки формы.
В начале создадим модель. В рамках данной статьи назовём её просто AjaxTest.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
class AjaxTest extends Model { public $text; public function rules() { return [ [ [ 'text' ], 'string' ] ]; } } |
Передадим её в представление в соответствующем действии контроллера. Для примера пусть будет index.
|
1 2 3 4 |
public function actionIndex() { return $this->render('index',['model'=> new AjaxTest()]); } |
В представлении создадим форму для отправки данных. Отображать ответ сервера мы будем в простом текстовом абзаце.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php $form = \yii\widgets\ActiveForm::begin([ 'id' => 'form', 'action' => '/testcontroller/test', 'method'=>'post', 'enableAjaxValidation' => false, ]); ?> = $form->field($model, 'text')->textInput(); ?> = Html::submitButton('Save'); ?> <?php $form->end(); ?> <br> |
Внешний вид получившейся формы представлен на рисунке ниже.
Напишем обработчик клиентской части. Для этого создадим файл скрипта и подключим его через AppAsset.php как показано ниже.
|
1 2 3 |
public $js = [ 'js/site.js' ]; |
В самом файле скрипта воспользуемся обычным методом ajax от jQuery.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
$(document).ready(function() { $('#form').on('beforeSubmit', function() { // Получаем объект формы var $testform = $(this); // отправляем данные на сервер $.ajax({ // Метод отправки данных (тип запроса) type : $testform.attr('method'), // URL для отправки запроса url : $testform.attr('action'), // Данные формы data : $testform.serializeArray() }).done(function(data) { if (data.error == null) { // Если ответ сервера успешно получен $("#output").text(data.data.text) } else { // Если при обработке данных на сервере произошла ошибка $("#output").text(data.error) } }).fail(function() { // Если произошла ошибка при отправке запроса $("#output").text("error3"); }) // Запрещаем прямую отправку данных из формы return false; }) }) |
Теперь остаётся только принять и обработать запрос на сервере. Для этого в нужном контроллере создаём соответствующее действие.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
public function actionTest() { // Создаём экземпляр модели. $model = new AjaxTest(); // Устанавливаем формат ответа JSON Yii::$app->response->format = \yii\web\Response::FORMAT_JSON; // Если пришёл AJAX запрос if (Yii::$app->request->isAjax) { $data = Yii::$app->request->post(); // Получаем данные модели из запроса if ($model->load($data)) { //Если всё успешно, отправляем ответ с данными return [ "data" => $model, "error" => null ]; } else { // Если нет, отправляем ответ с сообщением об ошибке return [ "data" => null, "error" => "error1" ]; } } else { // Если это не AJAX запрос, отправляем ответ с сообщением об ошибке return [ "data" => null, "error" => "error2" ]; } } |
Теперь с помощью созданной ранее формы можно оправить данные на сервер и получить ответ без перезагрузки страницы. На скриншоте ниже показана наша форма после отправки AJAX запроса и получения ответа о сервера.
Добавить комментарий