Desenvolvedor FrontEnd – wbruno black theme

Verificar se usuário já existe no banco

por em AJAX,jQuery (8) comentários

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.

sql.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
        header("Content-Type: text/html; charset=ISO-8859-1");

        $con = mysql_connect('localhost', 'root', '123');//faço a conexão com o banco
        mysql_select_db('artigos', $con);//seleciono a tabela no banco

        $sql = "
                SELECT * FROM `usuario`
                WHERE `nomeUsuario` = '{$_POST['nomeUsuario']}' ";//monto a query

        $q = mysql_query( $sql );//executo a query

        if( mysql_num_rows( $q ) > 0 )//se retornar algum resultado
                echo 'Já existe!';
        else
                echo 'Não existe ainda!';
?>

Arquivo index.php

<head>
        <script type="text/javascript" src="jquery-1.3.2.js"></script>
        <script type="text/javascript">
        $(function(){ // declaro o início do jquery
                $("input[name='verificar']").click( function(){//botão para disparar a ação

                        var nomeUsuario = $("input[name='nomeUsuario']").val();
                        //alert(nomeUsuario);

                        $.post('usuario.php',{nomeUsuario: nomeUsuario},function(data){
                                $('#resultado').html(data);//onde vou escrever o resultado
                        });
                });
        });// fim do jquery
        </script>
</head>
<body>
        <form action="" method="">
                <label>Nome Usuário: <input type="text" name="nomeUsuario" /></label>
                <input type="button" name="verificar" id="verificar" value="verificar" />
        </form>
        <div id="resultado"></div>

Basta fazer download do jQuery:
http://code.google.c…js&downloadBtn=

Criar a base com a tabela que postei a estrutura, e rodar os códigos.


Em funcionamento:

Demonstração Online

Para fazer essa verificação apenas ao “sair do campo”, sem precisar apertar o botão, use o evento onblur:

$("input[name='nomeUsuario']").blur( function(){