Cadastro e Login - #21 Ajax

Olá Turma! Hoje vamos inserir no nosso projeto o Ajax para que possamos oferecer ao nosso usuário uma experiência melhor com as respostas do sistema.

Usando ajax no Cadastro e Login

Para facilitar o trabalho com Ajax iremos baixar e linkar a biblioteca ZeptoJS. Dentro do método setFooter() da ClassLayout faremos o link dessa biblioteca.

$html="<script src='".DIRPAGE."lib/js/zepto.min.js'></script>\n";

Posteriormente adicionaremos na nossa view cadastro a div retornoCad que ficará responsável por receber os retornos dos formulários:

<div class="retornoCad"></div>

Incrementaremos a classValidate melhorando o retorno do método validateFinalCad().

#Validação final do cadastro
public function validateFinalCad($arrVar)
{
    if(count($this->getErro())>0){
        $arrResponse=[
            "retorno"=>"erro",
            "erros"=>$this->getErro()
        ];
    }else{
        $arrResponse=[
            "retorno"=>"success",
            "erros"=>null
        ];
        /*$this->cadastro->insertCad($arrVar);*/
    }
    return json_encode($arrResponse);
}

Repare que nosso retorno será no formato JSON.

O nosso controllerCadastro chamará esse método e imprimirá o resultado:

echo $validate->validateFinalCad($arrVar);

Agora a mágica ocorre no javascript. Faremos a função getRoot() que pegará o caminho absoluto do nosso sistema e chamaremos a função ajax após o submit do formulário:

//Ajax do formulário de cadastro
$("#formCadastro").on("submit",function(event){
    event.preventDefault();
    var dados=$(this).serialize();

    $.ajax({
       url: getRoot()+'controllers/controllerCadastro',
        type: 'post',
        dataType: 'json',
        data: dados,
        success: function (response) {
            $('.retornoCad').empty();
            if(response.retorno == 'erro'){
                getCaptcha();
                $.each(response.erros,function(key,value){
                    $('.retornoCad').append(value+'
');
                });
            }else{
                $('.retornoCad').append('Dados inseridos com sucesso!');
            }
        }
    });
});

Fizemos uma pequena alteração numa função que trabalhamos nas últimas aulas pra facilitar seu uso, a função getCaptcha(). Ela ficou assim:

function getCaptcha()
{
    grecaptcha.ready(function() {
        grecaptcha.execute('SUA KEY', {action: 'homepage'}).then(function(token) {
            const gRecaptchaResponse=document.querySelector("#g-recaptcha-response").value=token;
        });
    });
}
getCaptcha();

Sucesso nos códigos e na vida!