Как отправить данные из формы при помощи ajax и обработать их в контроллере?

Question

[Дамир Шаниязов]

На странице index рендерится GridView, GridView выводит модели и actions к ним (view, update, delete).
При нажатии на action update открывается форма с возможностью загрузить файл. Я решил сделать по другому. При клике на action создается всплывающее окно (библиотека jquery confirm), а в нем загружается content (view update). При нажатии на кнопку сохранить в представлении view всё прекрасно работает, но выглядит некрасиво. Тогда я решил убрать кнопку сохранить из представления update и добавить её на всплывающее окно. Тут для меня самое интересное начинается. Данные из формы отправляются и сохраняются, но вот изображение нет. Читал что-то про form data в js. Но что-то не помогло или требует какой-то особой обработки?

index

$('.action-update').click(function (e) {
        var title = $(this).data('title')
        var link = $(this).val()

        $.alert({
            title: title,
            content: 'url:' + link,
            columnClass: 'col-6',
            containerFluid: true,
            buttons: {
                saveButton: {
                    text: 'Сохранить',
                    btnClass: 'btn-green',
                    action: function () {
                        $.ajax({
                            url: link,
                            method: 'post',
                            data: $('form').serialize(),
                            success: function () {
                                console.log(1)
                            }
                        })
                    }
                },
                closeButton: {
                    text: 'Закрыть'
                }
            }
        })
    });

update

<?php

use yii\helpers\Html;
use yii\widgets\ActiveForm;

/* @var $this yii\web\View */
/* @var $model app\modules\admin\models\Specialist */
/* @var $form yii\widgets\ActiveForm */
?>

<div class="specialist-form">

    <?php $form = ActiveForm::begin(['options' => ['enctype' => 'multipart/form-data']]); ?>

    <?= $form->field($model, 'name')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'birthday')->textInput(['type' => 'date']) ?>

    <?= $form->field($model, 'dental_profile')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'basic_education')->textarea(['rows' => 6]) ?>

    <?= $form->field($model, 'additional_education')->textarea(['rows' => 6]) ?>

    <?= $form->field($model, 'experience')->textInput(['type' => 'date']) ?>

    <?= $form->field($model, 'about')->textarea(['rows' => 6]) ?>

    <?= $form->field($model, 'image')->fileInput() ?>

    <?= $form->field($model, 'active')->checkbox() ?>

    <div class="form-group">
        <?= Html::submitButton('Сохранить', ['class' => 'btn btn-success']) ?>
    </div>

    <?php ActiveForm::end(); ?>

</div>

controller action update

public function actionUpdate($id)
    {
        $this->layout = false;
        $model = $this->findModel($id);


        if ($model->load(Yii::$app->request->post()) && $model->save()) {
            if (UploadedFile::getInstance($model, 'image')) {
                $model->uploadImage();
            }

            return !$model->hasErrors() ? $this->asJson(['status' => true]) : $this->asJson(['status' => false, 'message' => $model->getErrors()]);
        }

        return $this->render('update', [
            'model' => $model,
        ]);
    }

Answer 1

[vitaly_74]

1. да действительно нужно копать в сторону formdata т.е. .serialize() тут не поможет.
2. можно попробовать так:
var formData = new FormData($('form')[0]);
и отправлять уже formData думаю тут никаких проблем не будет.

Comments

[Дамир Шаниязов]

Если так делать

$('.action-update').click(function (e) {
        var title = $(this).data('title')
        var link = $(this).val()

        $.alert({
            title: title,
            content: 'url:' + link,
            columnClass: 'col-6',
            containerFluid: true,
            buttons: {
                saveButton: {
                    text: 'Сохранить',
                    btnClass: 'btn-green',
                    action: function () {
                        var formData = new FormData($('form')[0]);

                        $.ajax({
                            url: link,
                            method: 'post',
                            data: formData,
                            contentType: false,
                            cache: false,
                            processData:false,
                            success: function (data) {
                                console.log(data)
                            }
                        })
                    }
                },
                closeButton: {
                    text: 'Закрыть'
                }
            }
        })
    });

то данный кусок кода не сработает

if ($model->load(Yii::$app->request->post()) && $model->save()) {
            if (UploadedFile::getInstance($model, 'image')) {
                $model->uploadImage();
            }

            return !$model->hasErrors() ? $this->asJson(['status' => true]) : $this->asJson(['status' => false, 'message' => $model->getErrors()]);
        }

[vitaly_74]

Дамир Шаниязов, потому что хз почему но yii2 берет данные из $_POST а не из $_FILES, либо когда вы делаете $model->load(...) для дальнейшего дебага, нужно знать в каком формате приходит к вам $_POST

[Дамир Шаниязов]

vitaly_74, спасибо, форма выхода загружалась) и картинка грузится как надо, без переделки actionUpdate. странно)