Is it wrong to mix $.post with $.ajax in jQuery?

Question

I am making a login screen with Ajax, jQuery and PHP.

Follows the code:

  $(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"); }) 
        });
    });

As you can see, I use the $.post to send the request. However, I used the $.ajax only to use the beforeSend, and works, displays the message before, during and after validation...

Is that wrong? What would the request look like if it were all done with $.ajax?

Answer 1

The $.post in fact is the $.ajax, but only makes POST, and the beforeSend is used to configure a specific jQuery ajax event/request, it is not wrong to use both, what is wrong is more the way you used it (is redundant), in fact I think the beforeSend maybe not even fired in this case, you could just do this:

        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"); });

For the beforeSend is more to configure the request for a specific ajax event (other than ajaxSetup that configures for all jQuery ajax events).

If you want to use $.ajax + POST + beforeSetup to set up a specific event, do so:

$.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() {

});