Symfony通过Ajax重定向

Question

The page login use ajax, in controller response in view web browser {"response":true,"data":{"from":"apachecms_api_login_submit","to":"/dashboard"}} and not redirect.

function to ajax when success

    function beforeSuccess(data){
            if(data.data.from=='apachecms_api_login_recovery_submit'){
                loading.hide();
                $.toast({
                    heading: "{{ 'success' | trans }}",
                    text: "{{ 'forgot.password.sending' | trans }}",
                    position: 'top-right',
                    icon: 'success',
                    hideAfter: 5000, 
                    stack: 10
                });
                changeForm('login')
            }else if(data.data.from=='apachecms_api_login_submit'){
                location.href=data.data.to;
            }else if(data.data.from=='apachecms_api_login_create_submit'){
                location.href=data.data.to;
            }
        }

Whats happend?

Answer 1

LoginController.php extends BaseController

    public function loginAction(Request $request){
        $form=$this->createForm(LoginType::class, null,array('action'=>$this->generateUrl('apachecms_api_login_submit'),'method' => 'POST'));
        $form->handleRequest($request);
        if($errors=$this->ifErrors($form)) return $errors;
        try {
            $entity = $this->getDoctrine()->getRepository('ApachecmsBackendBundle:Customer')->findOneBy(array('email'=>$form->get('_username')->getData(),'isDelete'=>false));
            if(!$entity)
                throw new Exception(null,200);

            $encoder_service = $this->get('security.encoder_factory');
            $encoder = $encoder_service->getEncoder($entity);
            if(!$encoder->isPasswordValid($entity->getPassword(), $form->get('_password')->getData(), $entity->getSalt()))
                throw new Exception(null,200);

            $token = new UsernamePasswordToken($entity, $form->get('_password')->getData(), "main", $entity->getRoles());
            $this->get("security.token_storage")->setToken($token);
            $event = new InteractiveLoginEvent($request, $token);
            $this->get("event_dispatcher")->dispatch("security.interactive_login", $event);

            return $this->responseOk(array('from'=>'apachecms_api_login_submit','to'=>$this->generateUrl('apachecms_frontend_dashboard'))); // HERE RETURN RESPONSE
        }catch (Exception $excepcion) {
            return $this->responseFail(array(array('property'=>'_username','code'=>'invalid_credentials','message'=>$this->get('translator')->trans('invalid.credentials'),'data'=>null)),200);
        }

    }

BaseController.php

public function responseOk($data=array(),$code=200){
        try{
            // if(!$data)
            //     throw new Exception('No se encontró el registro',200);
            return new Response($this->get('jms_serializer')->serialize(
                array('response'=>true,'data'=>$data),
            'json',$this->context),$code);
        }catch (Exception $excepcion) {
            return $this->responseFail(array(array(
                'property'=>null,
                'message'=>$excepcion->getMessage(),
                'code'=>'not_found',
                'data'=>null
            )),$excepcion->getCode());
        }
    }

index.html.twig <= Login Page

        {{ form_start(formLogin, {'attr': {'id':'loginform','novalidate':'novalidate','class':'form-horizontal form-material sendToApi login'} }) }}
          <div class="form-group">
            <div class="col-xs-12">
              {{form_widget(formLogin._username)}}
              <small class="text-danger error">{{ form_errors(formLogin._username) }}</small>
            </div>
          </div>
          <div class="form-group">
            <div class="col-xs-12">
              {{form_widget(formLogin._password)}}
              <small class="text-danger error">{{ form_errors(formLogin._password) }}</small>
            </div>
          </div>
          <div class="form-group row">
            <div class="col-md-12">
              <div class="checkbox checkbox-info pull-left p-t-0"></div>
              <a href="javascript:changeForm('recovery')" id="to-recover" class="text-dark pull-right">
                <i class="fa fa-lock m-r-5"></i> {{ 'forgot.password' | trans }}</a>
            </div>
          </div>
          <div class="form-group text-center">
            <div class="col-xs-12 p-b-20">
              {{form_widget(formLogin.submit,{ 'attr':{ 'class':'btn btn-block btn-lg btn-info btn-rounded','secondary-label':'loading' | trans}})}}
            </div>
          </div>
          {{ include('ApachecmsFrontendBundle::Login/social.html.twig') }}
          <div class="form-group m-b-0">
            <div class="col-sm-12 text-center">
              {{ 'not.account' | trans }}
              <a href="javascript:changeForm('register')" class="text-info m-l-5">
                <b>{{ 'register' | trans }}</b>
              </a>
            </div>
          </div>
        {{ form_end(formLogin) }}

Ajax

// pre-submit callback 
        function showRequest(formData, form, options) {
            loading.show('{{ 'loading' | trans }}');
            var url = form.attr("action");
            var method = form.attr("method").toUpperCase();
            var dataForm = form.serialize();
            var submitBtn = form.closest('form').find(':submit');
            var inputs=form.closest('form').find(':input:not(.dropify)');
            inputs.removeClass('error');
            inputs.next('small').html('');
            BtnSecondaryLabel=submitBtn.attr('secondary-label');
            BtnHtml=submitBtn.html();
            submitBtn.html('<i class="fa fa-gear fa-spin"></i> '+BtnSecondaryLabel);
            submitBtn.attr('disabled',true);
            return true; 
        } 

// post-submit callback 
        function showResponse(data, statusText, xhr, form)  {
            var submitBtn = form.closest('form').find(':submit');
            submitBtn.attr('disabled',false);
            submitBtn.html(BtnHtml);
            if(data.response==true){
                    beforeSuccess(data);
                }
       }

$(function (){
var options = { 
                beforeSubmit:  showRequest,  // pre-submit callback 
                success:       showResponse  // post-submit callback 
            };
$( "form.sendToApi" ).ajaxForm(options); <= capture class to form sendToApi
})

function beforeSuccess(data){
        if(data.data.from=='apachecms_api_login_recovery_submit'){
            loading.hide();
            $.toast({
                heading: "{{ 'success' | trans }}",
                text: "{{ 'forgot.password.sending' | trans }}",
                position: 'top-right',
                icon: 'success',
                hideAfter: 5000, 
                stack: 10
            });
            changeForm('login')
        }else if(data.data.from=='apachecms_api_login_submit'){
            location.href=data.data.to;
        }
    }