Symfony:ajax表单加载

时间:2016-11-29 22:44:26

标签: jquery ajax symfony

目前我的index.html.twig文件中有一个新动作。

sql = """SELECT * FROM [RunExampleQuery] WHERE [start] = ?"""
params = datetime.date(2016,11,25)
cursor.execute(sql, [params])

我的新动作就像这样

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

我希望这个新动作由ajax请求完成。因此,当用户点击 /** * 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调用加载表单,并将上面div的内容替换为标识为Create a new uni的内容。我怎样才能做到这一点?提前致谢。

2 个答案:

答案 0 :(得分:0)

对于ajax调用,Symfony controller所能做的只是以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时处理休息。

注意:代码未经过测试。

希望它有所帮助!

答案 1 :(得分: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请求时,您必须记住控制器中的重定向不适合您,因此您必须在前端重定向您的客户