Отправить форму, используя JavaScript - AJAX

Question

У меня есть сущность статьи, и я хочу добавить одну статью через ajax.

Я создаю форму:

public function buildForm(FormBuilderInterface $builder, array $options) {
    $builder
        ->add('name')
        ->add('descriptions');
}

Это мой контроллер:

/**
 * @Route("/admin/article/add", name="app_admin_add_article")
 */
public function addCustomer(Request $request)
{
    $form = $this->createForm(ArticleFormType::class);
    $form->handleRequest($request);

    if ($form->isSubmitted() && $form->isValid())
    {
        /** @var Article $article */
        $article = $form->getData();

        $em = $this->getDoctrine()->getManager();
        $em->persist($article);
        $em->flush();

        $this->addFlash('success', 'Article was successfully added!');

        return $this->redirectToRoute('app_admin_articles');
    }

    return $this->render('admin/articles/create.html.twig', [
        'articleForm'  =>  $form->createView(),
    ]);
}

Как мне написать javascript для отправки этой формы через ajax?

Answer 1

Вызовите свой ajax в html, используя кнопку или другой элемент

$.ajax({
 type: 'POST',
  url: "{{ url('app_admin_add_article') }}",
  data: {
     name: document.getElementById("nameInput").value,
     description: document.getElementById("descriptionInput").value
  },
  success: function(data) {
     alert(data);
  },
  error: function(err) {
     alert(err);
  }
});

и получите данные, отправленные ajax в ваш контроллер

/**
* @Route("/admin/article/add", name="app_admin_add_article")
*/
public function addCustomer(Request $request)
{
    // throw exception if not ajax call
    if (!$request->isXmlHttpRequest()) {
        throw new NotFoundHttpException();
    }

    $name = $request->request->get('name');
    $description = $request->request->get('description');

    $article = new Article();
    $article->setName($name);
    $article->setDescription($description);

    $entityManager = $this->getDoctrine()->getManager();
    $entityManager->persist($article);
    $entityManager->flush();

    return new Response('Article created');
}

Это просто базовый пример безпроверка входных значений и рассмотрение вашего класса расширяет контроллер

Answer 2

Я полагаю, ваш ajax-запрос должен выглядеть примерно так:

$.ajax({
  type: 'POST',
  url: $("form").attr("action"),
  data: $("form").serialize(), 
  //or your custom data either as object {foo: "bar", ...} or foo=bar&...
  success: function(response) { ... },
});

, и вы должны запустить его при нажатии на кнопку отправки после запрета по умолчанию для кнопки:

 e.preventDefault();

и в этом случае вы должны изменить логику контроллера.но если я могу спросить, почему вы хотите представить с ajax?