Symfony 4.3 Отправить форму с помощью Ajax и записать данные в базу данных

Question

Я довольно новичок в Ajax, и я пытаюсь отправить регистрационную форму с Ajax и Symfony, но я довольно застрял на шагах, чтобы сделать это:

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

    /**
     * @Route("/inscription", name="security_register")
     */
    public function register(Request $req, ObjectManager $manager, UserPasswordEncoderInterface $encoder)
    {
        $user = new UserSecurity();
        $form = $this->createForm(UserRegisterType::class,$user);

        $form->handleRequest($req);

        if($form->isSubmitted() && $form->isValid()) {
            $hash = $encoder->encodePassword($user,$user->getPassword());

            $user->setPassword($hash);
            $manager->persist($user);
            $manager->flush();
        }

        return $this->render('security/register.html.twig', [
            'title' => 'Doggn - S\'inscrire',
            'form' => $form->createView()

        ]);
    }

в моем app.js

//Display the register form on the index page
const getRegisterForm = (e) =>{
  e.preventDefault();
  $.ajax({
    url: '/inscription',
    method: 'GET',
    dataType: 'html'
  })
    .done((res)=>{
      $('html').html(res)
      $('.registerSubmit').on('click',handleSubmitForm)
    })
    .fail(()=>{
      console.log('error')
    })
}

//Submit the form with Ajax
const handleSubmitForm = (e) => {
  e.preventDefault();

  let email = $('#user_register_email').val()
  let password = $('#user_register_password').val()
  let confirm_password = $('#user_register_confirm_password').val()
  let username = $('#user_register_username').val()

  console.log(email)
  console.log(password)
  console.log(confirm_password)
  console.log(username)

  $.ajax({
    url: '/inscription',
    method: 'POST',
    dataType: 'json',
    data: {
      'user_register[email]':email,
      'user_register[password]':password,
      'user_register_confirm_password':confirm_password,
      'user_register[username]':username,
    }
  })
    .done((res)=>{
      console.log(res)
    })
    .fail(()=>{
      console.log('ERROR ON SUBMIT')
    })
}

$('#btn-connect').on('click',getRegisterForm)

с моим console.log. Я вижу, что получил 4 значения в моей форме, но я не знаю, как отправить их на мои контроллеры. ,Мой запрос Ajax в handleSubmitForm не отправляет данные и возвращает мне метод fail.

Answer 1

Вы должны сериализовать свою форму следующим образом

$.ajax({
    url:'/inscription', // if you can use $('#YOUR_FORM').attr('action')
    method: 'POST',
    data: $('#YOUR_FORM').serialize()
    ....
});