POST запрос с Ajax в Symfony 4

18 мая 2021, 19:50

Нужно отправить форму в контроллер без перезагрузки страницы.. Как это можно реализовать используя ajax

вот форма

 {{ form_start(form) }}
       {{ form_row(form.name) }}
       {{ form_row(form.email) }}
       {{ form_row(form.quest) }}
       <button id="#sub" type="submit"   class="btn btn-success rounded-0">ОТПРАВИТЬ СООБЩЕНИЕ</button>
{{ form_end(form) }}

Я пытался сделать так

контреллер

  /**
     * @Route("/",name="home")
     * @param Request $request
     * @return Response
     */
    public function index(Request $request){
        $portfolio= $this->getDoctrine()->getRepository(Portfoliodev::class)->getPortfolioElse();
        $portfolioScins= $this->getDoctrine()->getRepository(Portfoliodev::class)->getPortfolioScins();
        $message = new Message();
        $form = $this->createForm(MessageType::class,$message);
        $form->handleRequest($request);
        if ( $request->isXmlHttpRequest() ) {
            if ($form->isValid()) {
                $body = $form->getData();
                $entityManager = $this->getDoctrine()->getManager();
                $entityManager->persist($body);
                $entityManager->flush();
            }
            return new Response(json_encode(array('status'=>'success')));
        }
        return $this->render('index.html.twig', array(
            'portfoliodev'=> $portfolio,
            'portfolioscins'=> $portfolioScins,
            'form' => $form->createView()
        ));
    }

скрипт для отправки

    $('[name="message"]').submit(function(e){

        var formURL = "{{ path('home') }}";
        var formData = new FormData(this);
        $.ajax({
            url: formURL,
            type: 'POST',
            data:  formData,
            mimeType:"multipart/form-data",
            contentType: false,
            cache: false,
            processData:false,
            success: function(data, textStatus, jqXHR)
            {
                alert("Круто")
            },
            error: function(jqXHR, textStatus, errorThrown)
            {
                alert("Тобе пи**да")
            }
        });
        e.preventDefault(); //Prevent Default action.
        e.unbind();
    });
</script>

Скрипт нашел тут и немного подправил но к сожалению без безрезультатно. Страница все равно перезагружается ну и в базу ничего не добавляется.

Answer 1

Попробуйте вот так

<script>
    $('[name="message"]').on('submit', function(e) {
        e.preventDefault(); //Prevent Default action.
        e.stopPropargation();
        var form = this;
        var formURL = this.action;
        $.ajax({
            url: formURL,
            type: 'post',
            data:  $(form).serialize(),
            success: function(data, textStatus, jqXHR)
            {
                alert("Круто")
            },
            error: function(jqXHR, textStatus, errorThrown)
            {
                alert("Тобе пи**да")
            }
        });
    });
</script>

Но на вашем месте я бы прицеливался на форму не по нейму а по id чтобы наверняка. Да и в целом бы разнес контроллеры для формы и без нее, а то странная лапша получается. Тем более вы до проверки isXmlHttpRequest делаете $form->handleRequest, а по идее делать это нужно уже после проверки, потому что handle получается срабатывает у вас постоянно.

Так же отмечу что плохой тон переменные из шаблонизатора или php пихать в js

Вот примеры обработки форм