Verificar se usuário já existe no banco
E aee!
Primeiro post, e primeiro script em AJAX desse tipo… vamos lá..
Criando um pequeno e simples script em AJAX com jQuery, para verificar a existência de um usuário num banco de dados MySQL.
dump.sql
--
-- Estrutura da tabela `usuario`
--
CREATE TABLE IF NOT EXISTS `usuario` (
`idUsuario` int(10) NOT NULL AUTO_INCREMENT,
`nomeUsuario` varchar(200) NOT NULL,
PRIMARY KEY (`idUsuario`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;
--
-- Extraindo dados da tabela `usuario`
--
INSERT INTO `usuario` (`idUsuario`, `nomeUsuario`) VALUES
(1, 'William'),
(2, 'Bruno');
Arquivo usuario.php
<?php
//envio o charset para evitar problemas com acentos
header("Content-Type: text/html; charset=UTF-8");
$mysqli = new mysqli('localhost', 'root', '', 'artigos');
$user = filter_input(INPUT_GET, 'nomeUsuario');
$sql = "SELECT * FROM `usuario` WHERE `nomeUsuario` = '{$user}'"; //monto a query
$query = $mysqli->query( $sql ); //executo a query
if( $query->num_rows > 0 ) {//se retornar algum resultado
echo 'Já existe!';
} else {
echo 'Não existe ainda!';
}
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<form action="usuario.php" method="GET">
<label>Nome Usuário: <input type="text" name="nomeUsuario" /></label>
<input type="button" name="verificar" id="verificar" value="verificar" />
</form>
<div id="resultado"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){ // declaro o início do jquery
$("input[name='verificar']").on('click', function(){//botão para disparar a ação
var nomeUsuario = $("input[name='nomeUsuario']").val();
//console.log(nomeUsuario);
$.get('usuario.php?nomeUsuario=' + nomeUsuario,function(data){
$('#resultado').html(data);//onde vou escrever o resultado
});
});
});// fim do jquery
</script>
</body>
</html>
Basta fazer download do jQuery.
Criar a base com a tabela que postei a estrutura, e rodar os códigos.
Validando usuário ao sair do input, sem clicar no botão
Para fazer essa verificação apenas ao “sair do campo”, sem precisar apertar o botão, use o evento onblur:
$("input[name='nomeUsuario']").on('blur', function(){
var nomeUsuario = $(this).val();
$.get('usuario.php?nomeUsuario=' + nomeUsuario, function(data){
$('#resultado').html(data);
});
});