Question

我有一个在POST中以ajax发送的表单，我检查该表单在我的控制器中是否有效，并且是否有效，然后借助ajax成功功能，将该表单替换为userForm div中的另一个表单。当我检查HTML代码时，第一种形式被第二种形式替代，并且在每个输入的``值''中都有Twig变量值。到目前为止，一切都很好。

然后我想在jquery中自动提交第二个表单，但是在“网络”标签中出现500错误：

变量“ nom”不存在。

当我检查HTML代码时，在显示变量内容时，我不明白为什么会出现此错误。

我试图在JS中定义每个输入的“值”，而不是Twig变量，但是尽管我没有500错误，但它也不起作用。

我的主要观点：

<img src="{{ asset('loader/loader.gif', 'image_site') }}" alt="Loader" id="spinner" class="mt-30">

    <div id="userForm">
        {{ form_start(form, {'attr': {'class': 'contact-form user-form'}}) }}

        {{ form_errors(form) }}

        {{ form_widget(form.nom) }}
        {{ form_errors(form.nom) }}

        {{ form_widget(form.prenom) }}
        {{ form_errors(form.prenom) }}

        {{ form_widget(form.pays) }}
        {{ form_errors(form.pays) }}

        {{ form_widget(form.tel) }}
        {{ form_errors(form.tel) }}

        {{ form_widget(form.email) }}
        {{ form_errors(form.email) }}

        {{ form_widget(form.submit) }}

        {{ form_end(form) }}
</div>

<script>
        $(function () {
            let registerForm = "{{ path('site_devenir_vip_ajax_payment_form') }}";

            $("#spinner")
                .hide();

            $(document)
                .on("submit", "form", function (e) {
                    e.preventDefault();

                    $.ajax({
                        url: registerForm,
                        type: "POST",
                        dataType: "json",
                        data: $(this)
                            .serialize(),
                        beforeSend: function () {
                            $("#spinner")
                                .show();
                        },
                        success: function (data) {
                            console.log(data);
                            if (data.code === "ok") {
                                $("#userForm").html(data.response);
                                $("#paymentForm")
                                    .submit();
                            } else {
                                console.log(data);
                            }
                        },
                        complete: function () {
                            $("#spinner")
                                .hide();
                        },
                        error: function (jqXHR, status, error) {

                        },
                    });
                });
        });
    </script>

控制器：

/**
     * @Route("/{id<\d+>?1}/{slug}", methods={"GET", "POST"}, name="show")
     * @Security("is_granted('IS_AUTHENTICATED_ANONYMOUSLY')")
     */
    public function show(Request $request, Offre $offre, $slug): Response
    {
        if ($offre->getSlug() !== $slug) {
            return $this->redirectToRoute('site_devenir_vip_show', [
                'id'   => $offre->getId(),
                'slug' => $offre->getSlug(),
            ], Response::HTTP_MOVED_PERMANENTLY);
        }

        $utilisateur = new User();

        $form = $this->createForm(UserType::class, $utilisateur);
        $form->handleRequest($request);

        $session = new Session(new NativeSessionStorage(), new AttributeBag());
        $session->set('offre', $offre->getId());

        return $this->render('site/pages/devenir_vip/show.html.twig', [
            'form'  => $form->createView(),
            'offre' => $offre,
        ]);
    }

    /**
     * @Route("/load-payment-form", condition="request.isXmlHttpRequest()", name="ajax_payment_form", methods={"GET", "POST"})
     */
    public function paymentForm(Request $request): Response
    {
        $utilisateur = new User();

        $form = $this->createForm(UserType::class, $utilisateur);
        $form->handleRequest($request);

        if ($form->isSubmitted() === true) {
            if ($form->isValid() === true) {

                if ($request->getSession() === null) {
                    return new Response('Une erreur s\'est produite pendant la récupération de l\'offre.');
                }

                $offreSession = $request->getSession()->get('offre');
                $offre        = $this->entityManager->getRepository(Offre::class)->find($offreSession);

                $response = [
                    'code'     => 'ok',
                    'response' => $this->render('site/layout/partials/ajax/payment_form.html.twig', [
                        'nom'          => $utilisateur->getNom(),
                        'prenom'       => $utilisateur->getPrenom(),
                        'email'        => $utilisateur->getEmail(),
                        'tel'          => $utilisateur->getTel(),
                        'pays'         => $utilisateur->getPays(),
                        'accountId'    => $this->getParameter('app.payment.account_id'),
                        'abonnementId' => $offre->getAbonnementId(),
                    ])->getContent(),
                ];

                return new JsonResponse($response);
            }

            return new Response('Le formulaire comporte des erreurs.');
        }

        return $this->render('site/layout/partials/ajax/payment_form.html.twig');
    }

payment_form.html.twig：

<form method="post" action="https://mywebsite.com/" id="paymentForm">
    <input type="hidden" name="NOM" value="{{ nom }}">
    <input type="hidden" name="PRENOM" value="{{ prenom }}">
    <input type="hidden" name="EMAIL" value="{{ email }}">
    <input type="hidden" name="TEL" value="{{ tel }}">
    <input type="hidden" name="PAYS" value="{{ pays }}">
    <input type="hidden" name="ID" value="{{ accountId }}">
    <input type="hidden" name="ABONNEMENT" value="{{ abonnementId }}">
</form>

当前我被困在这一行，因为我有一个500错误：

$("#paymentForm").submit();

Answer 1

我不明白为什么您要在收到用户表格后呈现付款表格？在您的控制器中，注册用户后，您可以直接注册付款，而无需在前面进行付款。

因此，如果您还希望将其传递给我，请在JsonResponse中使用它：

$response = ['template' => $this->renderView('@your_template', ['form'=>$paymentForm])];
return new JsonResponse($response, JsonResponse::HTTP_OK);

此外，您还可以通过传递新的网址来收取第一个表单（用户）操作的费用：

$form = $this->createForm(UserType::class, $utilisateur, ['action'=> 'your_url', 'method' => 'POST');

在ajax提交表单中，无需创建let registerForm就可以获取表单URL。

问题：let registerForm的路由名称为site_devenir_vip_ajax_payment_form，您在控制器ajax_payment_form中的操作是否有名称前缀？

我可以帮您吗？

Twig变量在ajax成功函数内提交期间不存在

1 个答案: