Neste tutorial, vamos criar um sistema simples usando o jQuery e Ajax, para que o sistema complete os dados quando inserimos uma chave, por exemplo um locadora, cada filme cadastrado teria uma ID, ou um cliente se colocarmos o CPF cadastrado, o sistema vai completar os dados automaticamente.
Primeiramente vamos criar a página index.html que é a página onde teremos o formulário, meramente para demonstração iremos criar um sistema com 3 dados, o cpf do cliente, o seu nome e sua data de nascimento.
Vamos ao código, chame a página de index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Exemplo</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript" src="aplicacao.js"></script> </head> <body> <div style="width:500px; margin:auto;"> <fieldset> <legend>Dados do Cliente </legend><p> <label for="cpf">CPF: </label> <input type="text" id="cpf" name="cpf" /> </p> <p> <label for="nome">Nome: </label> <input type="text" id="nome" name="nome" /> </p> <p> <label for="dataNascimento">Data Nascimento: </label> <input type="text" id="dataNascimento" name="dataNascimento" /> </p> </fieldset> </div> </body> </html>
Depois de criada esta página, vamos criar nosso arquivo .js ele fica responsável por “jogar” as informações em seus respectivos campos, vamos chamar nossa página de aplicação.js dentro dela vamos digitar o seguinte código:
$(function () {
$("#cpf").blur(function () {
var cpf = $(this).val();
$.ajax({
type: "GET",
url: "pessoas.php",
data: "cpf="+cpf,
success: function(pessoa){
informacoesPessoa = pessoa.split("-");
$("#nome").val(informacoesPessoa[0]);
$("#dataNascimento").val(informacoesPessoa[1]);
}
});
});
});
Por fim, vamos criar o arquivos de onde podemos retirar os dados dos clientes, neste passo temos duas opções criar os dados no arquivo .php ou fazer uma busca em um banco de dados, aqui vamos criar o modelo onde nós mesmo cadastramos as informações em uma página .php, para fazer a página buscar em um banco de dados, só precisamos criar uma busca simples, aqui como nosso intuito é demonstrar um exemplo funcionando vamos criar uma simples página .php dentro dela cole o seguinte código.
<?php $cpf = $_GET['cpf']; $pessoas['000.000.000-00']['nome'] = "Exemplo1"; $pessoas['000.000.000-00']['dataNascimento'] = "16/06/1986"; $pessoas['111.111.111-11']['nome'] = "Exemplo2"; $pessoas['111.111.111-11']['dataNascimento'] = "20/01/1932"; $pessoas['222.222.222-22']['nome'] = "Exemplo3"; $pessoas['222.222.222-22']['dataNascimento'] = "23/04/1914"; echo $pessoas[$cpf]['nome'] ."-". $pessoas[$cpf]['dataNascimento']; ?>
DICA: Você pode também implementar a máscara para o campo CPF, como ensinado neste tutorial.
4 Comments
ficou muito bacana o codigo, você poderia dar uma exemplo com a consulta no banco, eu tentei fazer, mas não funcionou!
ja consegui obrigado
Esse Script me ajudou muito, segue de como uso com a busca no Banco de Dados, para quem tiver dúvidas.
query(‘SELECT * FROM `cadastro` WHERE (`cpf` = “‘.$cpf.'”)’);
if($pessoa->num_rows != 0) {
$x = $pessoa->fetch_object();
$pessoas[”.$x->cpf.”][‘nome’] = ”.$x->nome.”;
$pessoas[”.$x->cpf.”][‘dataNascimento’] = ”.$nascimento.”;
echo $pessoas[$cpf][‘nome’] .”-“. $pessoas[$cpf][‘dataNascimento’];
}
?>
Boa noite Chule!
Tentei executar o seu código e não deu certo. Com os dados no PHP conforme exemplo deste tutorial deu certo. Você poderia nos ajudar detalhando o seu script?
Muito obrigado.