Как правильно обработать форму в Yii2 через ajax?

Question

[kuznecov85]

Всем привет.
Не могу разобраться с отправкой ajax запроса.
Есть представление с формой:

$script = <<<JS
 $('#sendEmail').on('click', function(){
     var 
            name = $('#FirstNameContact').val(), 
            email = $('#emailContact').val(), 
            mess = $('#messContact').val();
     $('#sendBut').prop('disabled', 'disabled');
     console.log(name);
     $.ajax({
         url: '/',
         type: 'POST', 
         data: {name : name, email : email, mess : mess},
         success: function(res){
             console.log(res);
             $('#info-send').html(res); 
             $('#info-send').css('display','block');
         },
         error: function(){
             $('#error-send').html('Ошибка при отправке сообщения. Перезагрузите страницу');
             $('#error-send').css('display','block');
         }  
     });
     return false;
 });
JS;
$this->registerJs($script, yii\web\View::POS_READY);


                    <form method="post">
                        <input type="text" name="FirstName" id="FirstNameContact" placeholder="Ваше имя" required="">
                        <input class="email" name="Email" id="EmailContact" type="text" placeholder="Email" required="">
                        <textarea name="Message" id="MessageContact" placeholder="Сообщение" required=""></textarea>
                        <input type="submit" id="sendEmail" value="Написать">
                        <div id="contact-errorMsg"></div>
                        <div id="contact-result"></div>
                        <div id="contact-info"></div>
                    </form>

Изначально была такая (но в ходе работы попробовал разные варианты)

<?php $form = ActiveForm::begin() ?>
                <?= $form->field($form_model, 'name', ['template' => "{label}\n{input}"])->label(false)
                    ->textInput([
                        'placeholder' => "Name",
                        'class' => "",
                        'id' => "nameContact",
                    ]) ?>
                <?= $form->field($form_model, 'email', ['template' => "{label}\n{input}"])->label(false)
                    ->textInput([
                        'placeholder' => "Email",
                        'class' => "",
                        'id' => "emailContact",
                    ]) ?>
                <?= $form->field($form_model, 'subject')
                    ->textarea([
                        'rows' => 2,
                        'cols' => 5,
                        'placeholder' => "Your message",
                        'class' => "",
                        'id' => "messContact",
                    ])->label(false); ?>
                <?=Html::submitInput('Send', ['class' => '', 'id' => 'sendBut']);?>
                <?php $form = ActiveForm::end() ?>
                <div id="info-send"  class="alert alert-success"></div>
                <div id="error-send"  class="alert alert-danger"></div>

Есть контроллер

public function actionIndex()
    {
        if(\Yii::$app->request->isAjax){
            $name = Yii::$app->request->post('name');
            return "Спасибо, ваше сообщение принято. {$name}";
        }
}

Строка if(\Yii::$app->request->isAjax) отрабатывает, но данные из POST не передаются.

При этом, когда проверяю метод, которым передаются данные - указывает на метод GET.

Подскажите плиз в какую сторону копать?

Comments

[Евгений Вольф]

Подскажите плиз в какую сторону копать?

Первым делом открыть отладочную панель браузера (обычно F12) и посмотреть, каким реально методом отправляется форма... В Chrome - это вкладка "Network".

Answer 1

[Александр Токарчук]

Проверь параметр
url: '/',
возможно у тебя контролер ничего не принимает. Проверь еще раз роуты, вполне возможно косяк кроется там.

Соглашусь с slo_nik используй ActiveForm и serialize()

Comments

[kuznecov85]

Чудеса какие-то. У меня подставляется префикс /ru | /en (в зависимости от выбранного языка). В url исправил на url: 'en',
И все заработало =)

Спасибо!

Answer 2

[Алексей]

Скорее всего, у вас Yii ожидает данные не в том формате, который вы ему отправляете. Попробуйте при отправке ajax-запроса (в JS) добавить параметр contentType:'application/json'

PS . Возможно, вам пригодится - в jQuery есть функция serializeArray

Answer 3

[Дмитрий]

Добрый вечер.
Сделайте так

public function actionIndex()
    {
        if(\Yii::$app->request->isAjax){

print_r(Yii::$app->request->post());

            $name = Yii::$app->request->post('name');
            return "Спасибо, ваше сообщение принято. {$name}";
        }
}

и смотрите, что приходит в запросе.
Вот это
Yii::$app->request->post('name')
не совсем верно.
Когда собираете данные из формы при помощи jquery, то используйте serialize()
И вернитесь к использованию ActiveForm.

Comments

[kuznecov85]

Переделал на ActiveForm, получилось такое представление:

<div class="col-md-7 contact-form">

                    <?php $form = ActiveForm::begin() ?>
                    <?= $form->field($model, 'name', ['template' => "{label}\n{input}"])->label(false)
                        ->textInput([
                            'placeholder' => "Name",
                            'class' => "",
                            'id' => "nameContact",
                        ]) ?>
                    <?= $form->field($model, 'email', ['template' => "{label}\n{input}"])->label(false)
                        ->textInput([
                            'placeholder' => "Email",
                            'class' => "",
                            'id' => "emailContact",
                        ]) ?>
                    <?= $form->field($model, 'subject')
                        ->textarea([
                            'rows' => 2,
                            'cols' => 5,
                            'placeholder' => "Your message",
                            'class' => "",
                            'id' => "messContact",
                        ])->label(false); ?>
                    <?=Html::submitInput('Send', ['class' => '', 'id' => 'sendBut']);?>
                    <?php $form = ActiveForm::end() ?>
                    <div id="info-send"  class="alert alert-success"></div>
                    <div id="error-send"  class="alert alert-danger"></div>

                    <div id="info-send"  class="alert alert-success"></div>
                    <div id="error-send"  class="alert alert-danger"></div>
				</div>

В контроллере:

if(\Yii::$app->request->isAjax){

            print_r(Yii::$app->request->post());

            $name = Yii::$app->request->post('name');
            return "Спасибо, ваше сообщение принято. {$name}";
        } else {
            return $this->render('statPages/stat-ru', compact('model'));
        }

Переделал под serialize():

$script = <<<JS
 $('form').on('beforeSubmit', function(){
    console.log("qw");
    var data = $(this).serialize();
    $.ajax({
         url: '/',
         type: 'POST', 
         data: data,
         success: function(res){
             console.log(res);
             $('#info-send').html(res); 
             $('#info-send').css('display','block');
         },
         error: function(){
             $('#error-send').html('Ошибка при отправке сообщения. Перезагрузите страницу');
             $('#error-send').css('display','block');
         }  
     });
    return false; 
 });
JS;
$this->registerJs($script, yii\web\View::POS_READY);

Ответ от Ajax'a:
Array ( ) Спасибо, ваше сообщение принято.

Не может быть проблемы с моделью ContactForm ?
По идее у меняж данные туда тож отправляются, или чет путаю?

[Дмитрий]

kuznecov85, возможно Вы из формы не получаете данные, проверьте перед отправкой console.log(data)

[kuznecov85]

slo_nik, отправляется.
FirstName=%D0%98%D0%BC%D1%8F&Email=info%40yandex.ru&Message=%D0%9C%D0%BE%D0%B5%20%D1%81%D0%BE%D0%BE%D0%B1%D1%89%D0%B5%D0%BD%D0%B8%D0%B5%20

[Дмитрий]

kuznecov85, вот, теперь исправьте ошибку в параметрах запроса.

method (default: 'GET')
Type: String
The HTTP method to use for the request (e.g. "POST", "GET", "PUT"). (version added: 1.9.0)