06 Março 2006
Prototype -> Login Ajax
Respondendo a uma duvida da comunidade no Orkut resolvi criar aqui um validador de login e senha em Ajax. Primeiro vamos criar
uma página de login:
Nada de mais só um simples formulário. Na verdade o que vária é que no lugar de um botão submit temos um simplesmente um botão com ação onclick definida para a função Login().
São 2 funções, uma que envia os dados de login e outra que recebe e determina o que fazer:
Lembre-se de colocar a biblioteca prototype.js no arqivo. O que o método login faz é chamar a página que efetua o login passando os parametros e definindo como retLogin() como a função que será chamada quando a página retornar.
A página efetualogin.php simplesmente é uma sequência de validação com retorno de mensagem.
Eis como fica o resultado: Exemplo 1
uma página de login:
<body>
<div id="loginDIV">
<h3>Login</h3>
<form name="frmLogin">
Login: <input type="text" name="login" id="login" />
Senha: <input type="password" name="senha" id="senha" />
<input type="button" value="login" onclick="Login()" />
</form>
</div>
</body>
Nada de mais só um simples formulário. Na verdade o que vária é que no lugar de um botão submit temos um simplesmente um botão com ação onclick definida para a função Login().
São 2 funções, uma que envia os dados de login e outra que recebe e determina o que fazer:
function Login(){
login = $("login").value;
senha = $("senha").value;
url = "http://localhost/efetualogin.php";
pars = "login=" + login + "&senha=" + senha;
var myAjax = new Ajax.Request( url, {method: 'post',
parameters: pars,
onComplete: retLogin});
}
function retLogin(or1){
if (or1.responseText == "OK"){
//Login efetuado
alert("login efetuado!");
$("loginDIV").style.display="none";
}else{
alert(or1.responseText);
}
}
Lembre-se de colocar a biblioteca prototype.js no arqivo. O que o método login faz é chamar a página que efetua o login passando os parametros e definindo como retLogin() como a função que será chamada quando a página retornar.
A página efetualogin.php simplesmente é uma sequência de validação com retorno de mensagem.
<?
header("Content-type: text/html; charset=ISO-8859-1");
$login = $_REQUEST["login"];
$senha = $_REQUEST["senha"];
if ($login == "teste"){
if ($senha == "teste")
echo "OK";
else
echo "Senha Inválida";
}else{
echo "Login Inválido";
}
?>
Eis como fica o resultado: Exemplo 1
Comentários:
<< Início
Eu d novo
Quais os beneficios utilizando o ajax, ex: se eu fizesse isso tudo em php. Nao daria no mesmo?
Quais os beneficios utilizando o ajax, ex: se eu fizesse isso tudo em php. Nao daria no mesmo?
A função no caso é de fazer o controle do login via JavaScript, mas aí vc perguntou: "não daria no mesmo fazer tudo em php?"
Na verdade daria, só que usando dessa forma você consegue efetuar logon do cara se dar refresh na página...
imagina que vc tenha uma página com uma noticia, só que a pessoa queira comentar a noticia. Você poderia solicitar pra ele efetuar logon e abrir a página de novo, ao invés disso você chama uma função em JavaScript que chama o método de logon, a pessoa autentica e pode comentar, sem ter que mudar de página.
Na verdade daria, só que usando dessa forma você consegue efetuar logon do cara se dar refresh na página...
imagina que vc tenha uma página com uma noticia, só que a pessoa queira comentar a noticia. Você poderia solicitar pra ele efetuar logon e abrir a página de novo, ao invés disso você chama uma função em JavaScript que chama o método de logon, a pessoa autentica e pode comentar, sem ter que mudar de página.
Olá Pedro... pois é, aprendi com você e fiz minha versão do negócio do login... =)
Ah, já coloquei um link pra cá! ;)
Qualquer coisa tamo ai...
Abraco
Ah, já coloquei um link pra cá! ;)
Qualquer coisa tamo ai...
Abraco
Pedro, não sei porque quando logado com login e senha correta só aparece um alert de "OK" em vez de aparecer "Login efetuado!" e inibir a div "loginDIV". O que pode ser?
Postar um comentário
<< Início
Assinar Postagens [Atom]