javascript - Jquery 函数 submit() 在 ajax 成功函数中不起作用

Question

我有一个在 AJAX 中通过 POST 提交的表单，如果此表单有效，我会返回一个我想在 Jquery 中自动提交的新表单。我感觉我的.submit()完全被忽略了，我不明白..

我尝试在调用 submit() 函数之前和之后制作 console.log()，它们显示得很好，这很奇怪..

我的主视图(show.html.twig):

{% block body %} 
            <div class="text-center">
                <img src="{{ asset('loader/loader.gif', 'image_site') }}" alt="Loader Just Pronos" id="spinner" class="mt-30">
            </div>

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

                <div class="row mt-10" id="formError">
                    <div class="col-12">
                        {{ form_errors(form) }}
                    </div>
                </div>

                <div class="row">
                    <div class="col">
                        <div class="name-input">
                            {{ form_widget(form.nom) }}
                            {{ form_errors(form.nom) }}
                        </div>
                    </div>

                    <div class="col">
                        <div class="name-input">
                            {{ form_widget(form.prenom) }}
                            {{ form_errors(form.prenom) }}
                        </div>
                    </div>

                    <div class="col">
                        <div class="box-input">
                            {{ form_widget(form.pays) }}
                            {{ form_errors(form.pays) }}
                        </div>
                    </div>
                </div>

                <div class="row mt-10">
                    <div class="col">
                        <div class="box-input">
                            {{ form_widget(form.tel) }}
                            {{ form_errors(form.tel) }}
                        </div>
                    </div>

                    <div class="col">
                        <div class="email-input">
                            {{ form_widget(form.email) }}
                            {{ form_errors(form.email) }}
                        </div>
                    </div>
                </div>

                <div class="row mt-10">
                    <div class="col">
                        <p class="mt-15"><em>* Après avoir soumis ce formulaire, vous serez automatiquement redirigé sur la plateforme de paiement sécurisée Klik&Pay.</em></p>
                        <div class="input-submit">
                            {{ form_widget(form.submit) }}
                        </div>
                    </div>
                </div>

                {{ form_end(form) }}
            </div>
        </div>
    </section>
{% endblock %}
{% block js %}
    <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, textStatus, xhr) {
                            if (xhr.status === 200 && textStatus === 'success') 
                            {
                                $("#userForm")
                                    .html(data.template);
                                console.log("here 1");
                                $("#paymentForm").submit();
                                console.log("here 2");
                            } else {
                                console.log(data);
                            }
                        },
                        complete: function () {
                            $("#spinner")
                                .hide();
                        },
                        error: function (jqXHR, status, error) {

                        },
                    });
                });
        });
    </script>
{% endblock %}

第二种形式(klik_and_pay_form.html.twig):

{% form_theme formKlikAndPay 'site/form_theme/form_div_layout.html.twig' %}

{{ form_start(formKlikAndPay, {'attr': {'class': 'contact-form user-form', 'action': 'https://www.klikandpay.com/paiementtest/checkabon.pl', 'id': 'paymentForm', 'method': 'POST'}}) }}

<div class="row mt-10" id="formError">
    <div class="col-12">
        {{ form_errors(formKlikAndPay) }}
    </div>
</div>

<div class="row">
    <div class="col">
        <div class="name-input">
            {{ form_widget(formKlikAndPay.nom) }}
            {{ form_errors(formKlikAndPay.nom) }}
        </div>
    </div>

    <div class="col">
        <div class="name-input">
            {{ form_widget(formKlikAndPay.prenom) }}
            {{ form_errors(formKlikAndPay.prenom) }}
        </div>
    </div>

    <div class="col">
        <div class="box-input">
            {{ form_widget(formKlikAndPay.pays) }}
            {{ form_errors(formKlikAndPay.pays) }}
        </div>
    </div>
</div>

<div class="row mt-10">
    <div class="col">
        <div class="box-input">
            {{ form_widget(formKlikAndPay.tel) }}
            {{ form_errors(formKlikAndPay.tel) }}
        </div>
    </div>

    <div class="col">
        <div class="email-input">
            {{ form_widget(formKlikAndPay.email) }}
            {{ form_errors(formKlikAndPay.email) }}
        </div>
    </div>
</div>

{{ form_row(formKlikAndPay.accountId) }}
{{ form_row(formKlikAndPay.abonnementId) }}

<div class="row mt-10">
    <div class="col">
        <p class="mt-15"><em>* Après avoir soumis ce formulaire, vous serez automatiquement redirigé sur la plateforme de paiement sécurisée Klik&Pay.</em></p>
        <div class="input-submit">
            {{ form_widget(formKlikAndPay.submit) }}
        </div>
    </div>
</div>

{{ form_end(formKlikAndPay) }}

Controller :

/**
     * @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(UserPaiementType::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", name="ajax_payment_form", condition="request.isXmlHttpRequest()", methods={"GET", "POST"})
     */
    public function ajaxKlikAndPayForm(Request $request): Response
    {
        $utilisateur = new User();

        $form = $this->createForm(UserPaiementType::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);

                $klikAndPayPaiement = new KlikAndPayPaiement();
                $klikAndPayPaiement->setPrenom($utilisateur->getPrenom());
                $klikAndPayPaiement->setNom($utilisateur->getNom());
                $klikAndPayPaiement->setPays($utilisateur->getPays());
                $klikAndPayPaiement->setEmail($utilisateur->getEmail());
                $klikAndPayPaiement->setTel($utilisateur->getTel());
                $klikAndPayPaiement->setAccountId($this->getParameter('app.klik_and_pay.account_id'));
                $klikAndPayPaiement->setAbonnementId($offre->getIdKlik());

                $formKlikAndPay = $this->createForm(KlikAndPayPaiementType::class, $klikAndPayPaiement);
                $formKlikAndPay->handleRequest($request);

                $response = [
                    'template' => $this->renderView('site/layout/partials/ajax/klik_and_pay_form.html.twig', [
                        'formKlikAndPay' => $formKlikAndPay->createView(),
                    ]),
                ];

                return new JsonResponse($response, JsonResponse::HTTP_OK);
            }

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

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

        $klikAndPayPaiement = new KlikAndPayPaiement();
        $klikAndPayPaiement->setPrenom($utilisateur->getPrenom());
        $klikAndPayPaiement->setNom($utilisateur->getNom());
        $klikAndPayPaiement->setPays($utilisateur->getPays());
        $klikAndPayPaiement->setEmail($utilisateur->getEmail());
        $klikAndPayPaiement->setTel($utilisateur->getTel());
        $klikAndPayPaiement->setAccountId($this->getParameter('app.klik_and_pay.account_id'));
        $klikAndPayPaiement->setAbonnementId($offre->getIdKlik());

        $formKlikAndPay = $this->createForm(KlikAndPayPaiementType::class, $klikAndPayPaiement);
        $formKlikAndPay->handleRequest($request);

        return $this->render('site/layout/partials/ajax/klik_and_pay_form.html.twig', [
            'formKlikAndPay' => $formKlikAndPay->createView(),
        ]);
    }

你知道为什么 jquery 函数 submit() 不起作用吗？

更新:

我试过这个:

$("#paymentForm").trigger("submit");
$("#paymentForm")[0].trigger("submit");
$("#paymentForm").submit();
$("#paymentForm")[0].submit();

let submitPayment = $('button[name="submit"]');
$(submitPayment).trigger('click');

我在 form_start 中添加了这个:

'method': 'POST'

Answer 1

您已经阻止了 jQuery 提交处理程序中的默认值

您可以通过更改来使用 native 提交:

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

到

$("#paymentForm")[0].submit();

原生提交事件不会被jQuery提交监听器监听