1

Eu estou fazendo uma tela de login com Ajax, jQuery e PHP.

Segue o código:

  $(document).ready(function(){
        //Quando 'btnEntrar' for clicado
        $("#btnEntrar").click(function(){
            //Envia por POST para a página login.php: usuario = valor da textbox usuario
            //e senha = valor da textbox senha (pegando valores pelo ID)
            var envio = $.post("processarLogin.php", { 
             nick: $("#form-username").val(), 
            senha: $("#form-password").val() 
            })
            $.ajax({
            beforeSend: function(){
              $("#resultado").html("<div class='alert alert-info'><i class='fa fa-spinner'></i> Verificando dados...</div>");
            }
            })
            //Se achou a página, exiba o resultado no elemento com ID resultado
            envio.done(function(data) {
                if(data==0){
                 $("#resultado").html("<div class='alert alert-danger'><i class='fa fa-warning'></i> Nome de usuário ou senha incorretos.</div>");
                }else{
                 $("#resultado").html("<div class='alert alert-success'><i class='fa fa-check-circle'></i> Login bem sucedido, você será redirecionado...</div>");
                 setTimeout(function(){ document.location.href='painel.php';},500);
                }
            })
            //Se envio falhar
            envio.fail(function() { alert("Erro na requisição"); }) 
        });
    });

Como vocês podem ver, uso o $.post para enviar a requisição. Porém, utilizei o $.ajax apenas para usar a beforeSend, e funciona, exibe a mensagem antes, durante e após a validação...

Isso é errado? Como ficaria a requisição se fosse toda feita com $.ajax?

1 Resposta 1

2

O $.post na verdade é o $.ajax, mas só faz POST, e o beforeSend é usado pra configurar um evento/requisição especifico ajax do jQuery, não é errado usar ambos, o que está errado é mais a maneira como usou (está redundante), na verdade eu acho que o beforeSend talvez nem seja disparado neste caso, você poderia fazer simplesmente isto:

        var envio = $.post("processarLogin.php", { 
             nick: $("#form-username").val(), 
            senha: $("#form-password").val() 
        });

        $("#resultado").html("<div class='alert alert-info'><i class='fa fa-spinner'></i> Verificando dados...</div>");

        //Se achou a página, exiba o resultado no elemento com ID resultado
        envio.done(function(data) {
            if(data==0){
             $("#resultado").html("<div class='alert alert-danger'><i class='fa fa-warning'></i> Nome de usuário ou senha incorretos.</div>");
            }else{
             $("#resultado").html("<div class='alert alert-success'><i class='fa fa-check-circle'></i> Login bem sucedido, você será redirecionado...</div>");
             setTimeout(function(){ document.location.href='painel.php';},500);
            }
        });

        //Se envio falhar
        envio.fail(function() { alert("Erro na requisição"); });

Pois o beforeSend é mais pra configurar a requisição de um evento ajax especifico (diferente do ajaxSetup que configura pra todos eventos ajax do jQuery).

Se quer usar $.ajax + POST + beforeSetup pra configurar um evento especifico, faça assim:

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  beforeSend: function(xhr){
      //Reescreve o mimeType do formulário na hora do envio
      xhr.overrideMimeType( "text/plain; charset=utf-8" );
  }
}).done(function() {

}).fail(function() {

});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .