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.
</p>
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); }); });
</span></span>