使用 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 请求应该看起来像这样：

$.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 ？

Answer 2

使用按钮或其他元素在 html 上调用 ajax

$.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');
}

这只是一个基本示例，没有验证输入值并考虑到您的 class extends Controller

使用 javascript - AJAX 提交表单

Submit form using javascript - AJAX

symfony

symfony4