Eu estou fazendo uma tela de login com ajax, jQuery e PHP. Vou colocar 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"); }) }); });
$(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$.post
para enviar a requisição. Porém, utilizei o $.ajax$.ajax
apenas para usar a beforeSend, e funciona, exibe a mensagem antes, durante e após a validação... A questão é: isso é errado? Como ficaria a requisição se fosse toda feita com $.ajax? Sou novato no assunto... ahauha