2016-11-29 45 views
0

目前我在我的index.html.twig文件中有一個新的操作。Symfony:ajax表單加載

 <div id="formcontent"> 
      form content goes here 
     </div> 
     <a href="{{ path('uni_new') }}">Create a new uni</a> 

和我的新的行動看起來像這樣

/** 
* Creates a new uni entity. 
* 
* @Route("/new", name="uni_new") 
* @Method({"GET", "POST"}) 
*/ 
public function newAction(Request $request) 
{ 
    $uni = new Uni(); 
    $form = $this->createForm('AppBundle\Form\UniType', $uni); 
    $form->handleRequest($request); 

    if ($form->isSubmitted() && $form->isValid()) { 
     $em = $this->getDoctrine()->getManager(); 
     $em->persist($uni); 
     $em->flush($uni); 

     return $this->redirectToRoute('uni_show', array('id' => $uni->getId())); 
    } 

    return $this->render('uni/new.html.twig', array(
     'uni' => $uni, 
     'form' => $form->createView(), 
    )); 
} 

我想通過Ajax請求來完成這個新動作。所以,當用戶點擊Create a new uni,而不是去一個新的網址,我希望通過ajax調用加載表單,並替換上面的div的內容,編號爲formcontent。我怎樣才能做到這一點?提前致謝。

+0

您顯示的PHP代碼總體上是OK的,您需要的是以JS爲中心的,並且與Symfony無關。你應該在那裏添加你的JS代碼。 – lsouza

回答

0

對於ajax調用,所有Symfony controller可以做的僅僅是以格式HTML json格式響應格式HTML。

/** 
* Creates a new uni entity. 
* 
* @Route("/new", name="uni_new") 
* @Method({"GET", "POST"}) 
*/ 
public function newAction(Request $request) 
{ 
    $uni = new Uni(); 
    $form = $this->createForm('AppBundle\Form\UniType', $uni); 
    $form->handleRequest($request); 

    if ($form->isSubmitted() && $form->isValid()) { 
     $em = $this->getDoctrine()->getManager(); 
     $em->persist($uni); 
     $em->flush($uni); 

     /** 
     * If your form also need a ajax submit, respond output accordingly. 
     */ 

     return $this->redirectToRoute('uni_show', array('id' => $uni->getId())); 
    } 

    if ($request->isXmlHttpRequest()) { 
     $formHtml = $this->renderView('uni/new.html.twig', array(
      'uni' => $uni, 
      'form' => $form->createView(), 
     )); 
     return new JsonResponse(
      array(
       'success' => true, 
       'formHtml' => $formHtml 
      ) 
     ); 
    } 

    return $this->render('uni/new.html.twig', array(
     'uni' => $uni, 
     'form' => $form->createView(), 
    )); 
} 

使用$request->isXmlHttpRequest()如果它能夠探測到一個Ajax調用,並作出相應的反應,該jQuery.ajax應注意休息的形式置換到div的條款。

注意:代碼未經測試。

希望它有幫助!

0
$(function() { 
(function submitHandler() { 
    var $form = $("#your_form_id"); 
    $form.on('submit', function (e) { 
     e.preventDefault(); 
     $.ajax({ 
      type: $(this).attr('method'), 
      url: $(this).attr('action'), 
      data: $(this).serialize() 
     }) 
      .done(function (data) { 
       $form.replaceWith(data); 
       submitHandler(); 
      }) 
      .fail(function (jqXHR) { 
       if(jqXHR.status === 302) { 
        location.href = jqXHR.responseJSON; 
       } else { 
        location.href = Routing.generate('registration_fail') 
       } 
      }) 
    }) 
})(); 

});

你必須在你的前端添加一些js。在這段代碼中,我使用了JQUERY。

在你的控制,當你的表格是有效的

if ($request->isXmlHttpRequest()) { 
       return new JsonResponse($this->generateUrl('registration_success'), 302); 
      } 

一些額外的代碼你必須記住,重定向在控制器不工作的你,當你使用Ajax請求,所以你必須給客戶重定向前端