0

Есть обычная форма, из которой при submit'е, берутся: url, action, серелизованые данные и делается ajax запрос

<form class="dynamic-form ajaxform modal-after-submit" action="/form/order-call-simple" method="post" data-after-modal="button[href=&quot;#wi-popup2&quot;]">

  <input type="hidden" name="_csrf-frontend" value="_kqgpOBZWj5LfdylhccB0nUrhlCSftWer04-vyj_vlGRJc3WkGwVdyQprtfQrXS9Kn-2B806ksnfY0bZUpjzMg==" />

  <input class="telephone-mask" name="2" maxlength="19" placeholder="( ___ )   ___-__-__" required="true" />

  <input type="checkbox" class="form-control checkbox2" id="dynamicForm_w0_checkbox" required="" checked="" />
  <label for="dynamicForm_w0_checkbox">Ознакомлен и согласен с <a href="/politika-sbora-informacii/">политикой сбора информации</a></label>
  <input type="submit" class="btn btn-default" name="" value="Заказать" />
</form>

Отправка:

   $('form.ajaxform').on('submit', function (event) {
       event.preventDefault();
       event.stopImmediatePropagation();

       var form = $(this);

       $.ajax({
           url: form.attr('action'),
           method: form.attr('method'),
           data: form.serialize(),
           success: function (response) {
              console.log('Форма отправилась');
           },
           error: function (error) {
              // Перед перезагрузкой, прелетает ошибка 
               console.log(error);
           }
       });
   });

Проблема в том, что сразу после ajax запроса, браузер делает переход по тому урлу, на который был отправлен запрос.
Еще, после запроса, в error callback прилетает какая-та ошибка такого вида: {readyState: 4, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …} - это вроде объект, но он не раскрывается в консоли (не знаю что это). Также, в консоли выводится предупреждение - VM4682 yii.js:360 Resource interpreted as Document but transferred with MIME type application/json: "site.loc/form/order-call-simple".

На backend'е, данные отправляются очень незамысловато

class FormController extends BaseController
{
    public $enableCsrfValidation = false;

    public function actionOrderCallSimple()
    {
        //TODO: Implement this method
        return $this->asJson(['success' => true]);
    }
}

В чем может быть проблема? event.preventDefault() - не причем, он работает если не отправлять запрос.

3 ответа 3

1

VM4682 yii.js:360 Resource interpreted as Document but transferred with MIME type application/json: "site.loc/form/order-call-simple"

это означает, что твой обработчик возвращает тебе массив. Добавь в js

dataType:"json",

по поводу перехода, попробуй в success и error обработчики ajax добавить

return false;
6
  • а так же попробуй надеть деревянные наушники и помахать палочками на взлетной полосе - ru.wikipedia.org/wiki/…
    – user176262
    26 июн 2018 в 4:53
  • @Igor не понял сарказма. Если знаешь ответ или можешь помочь, пиши. Своим таким сарказмом показываешь свой уровень интеллекта, что не выше у школоло с ЧСВ овер 9000. Или молчи...
    – m.sultan
    26 июн 2018 в 4:57
  • извините, ошибся - "также" в данном случае надо писать слитно
    – user176262
    26 июн 2018 в 5:36
  • может стоит поменять type="submit" на type="button" input-У
    – Air
    26 июн 2018 в 5:37
  • @Air event.preventDefault(); это и так компенсирует. Подозреваю, что дело в yii, и что есть другие обработчики submit-a.
    – user176262
    26 июн 2018 в 5:41
1

Если версия Yii2 свежайшая, то стоит перехватывать событие beforeSubmit. Т.к. форма реализована без использования ActiveForm (или это исходник формы из инспектора?), то скорее всего такого события не наступит.

Чтобы запретить дефолтную отправку формы, необходимо вернуть false. Стандартно так:

$('form.ajaxform').on('submit', function (event) {
    // ваш код для обработки данных без превентов и пропогатионов
    // отправка данных на сервер
    return false; // это остановит стандартную отправку формы браузером
});

Необходимо обратить внимание на то, что return false следует разместить в самом конце, чтобы вернуть сразу, после нажатия кнопки сабмита. Блок с ajax выполнится чуть позже, потому что ему надо еще подождать ответа от сервера. Ретурны из блока ajax не изменят ситуацию.

6
  • Форма из инспектора, но создается с помощью Html::beginForm() и Html::endForm() (создается в том виде, в котором я её скопировал из испектора). return false - не помог
    – XYZ
    26 июн 2018 в 8:44
  • обработчик beforeSubmit на это форму тоже не реагирует, видимо проблема не в этом.
    – XYZ
    26 июн 2018 в 8:50
  • ActiveForm генерирует событие beforeSubmit, из-за Html::beginForm() наверно такое событие не возникает. Где return расположен? 26 июн 2018 в 8:52
  • Расположен в конце
    – XYZ
    26 июн 2018 в 8:56
  • Я сейчас просмотрел список запросов которые отправляются. Почему-то, после ajax запроса, браузер делает еще один "обычный" запрос, по этому урлу и в ответ получает 302
    – XYZ
    26 июн 2018 в 8:59
1

Проблема была в отсутствии слеша в конце url'a, т.е. url должен был выглядеть так: /form/order-call-simple/.
По этой причине, браузер получал от сервера статус-код: 302 и делал редирект на тот же url, только уже со слешем на конце.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.