Autor: YESbr

Tutorial de Ajax e jQuery

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']; 
?>

Veja o exemplo funcionando.

DICA: Você pode também implementar a máscara para o campo CPF, como ensinado neste tutorial.

Como criar um Auto Completar

A função auto completar é muito interessante para se aplicar em muitos lugares, por exemplo, se criamos um site onde vamos fazer o cadastro de clientes, e precisamos do estado (exemplo São Paulo) ter de digitar o nome completo pode ser muito trabalhoso, então criamos a função auto completar onde o usuário, digita apenas algumas letras do nome, e as “opções” que tiverem as primeiras letras digitadas são selecionadas em nosso banco de dados, isso pode ser usado com varias finalidades não só nomes, podemos usar este tipo de função para checar, por exemplo cadastros de clientes, de produtos etc, esta ferramenta junta com outras como por exemplo, o tutorial de Ajax e jQuery, imagine um sistema por exemplo de uma locadora, onde você “vai digitando” e os nomes dos clientes que tenham essas letras aparecem na tela, você então seleciona o nome do cliente que quer e o sistema preenche todas as informações dele para por exemplo fazer a locação de um filme, de modo que você saberá exatamente com qual cliente você esta trabalhando.

Para fazer o auto completar, vamos precisa copiar dois arquivos javascript dentro de uma pasta chamada “js”.

Arquivo 1 (Lembrando de manter os mesmo nomes dos arquivos)
Arquivo 2 (Lembrando de manter os mesmo nomes dos arquivos)

Depois de ter copiado dos arquivos vamos coloca-los em uma pasta chamada js, criada a pasta e colocada os dentro precisamos então criar dois arquivos um onde vamos digitar o que estamos procurando, e outra página que é quem terá o script para que se faça a busca no banco de dados.

Primeiramente vamos criar o arquivo index.html que será responsável por captar as informações que serão buscadas
O código de nossa página principal é o seguinte:

<script type="text/javascript" src="js/autocomplete.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/autocomplete.css">
<script type="text/javascript">
$(document).ready(function(){
 
    new Autocomplete("campo_estado", function() {
        this.setValue = function( id, estado, sigla ) {
            $("#id_val").val(id);
            $("#estado_val").val(estado);
            $("#sigla_val").val(sigla);
        }
        if ( this.isModified )
            this.setValue("");
        if ( this.value.length < 1 &#038;& this.isNotClick ) 
            return ;
        return "ajax.php?q=" + this.value;
    });
 
});
</script>
 
 
<h1>Tutorial de auto complete em Ajax</h1>
Insira um estado:
<input type="text" name="campo_estado" id="campo_estado">

Esta página, pega o que for digitado no campo input, e manda os dados para o php que vai fazer uma consulta letra a letra.

Em seguida crie o a página php com o nome de ajax.php este é código que vai fazer a busca nos servidores, lembre-se de mudar o nome o usuário de banco de dados, senha e suas tabelas.

<?php
  
$hostname = 'localhost';
$username = 'seu usuario';
$password = 'sua senha';
$dbname = 'seu banco de dados';
 
mysql_connect( $hostname, $username, $password ) or die ( 'Erro ao tentar conectar ao banco de dados.' );
mysql_select_db( $dbname );
 
$q = mysql_real_escape_string( $_GET['q'] );
 
$sql = "SELECT * FROM estados where locate('$q',estado) --> 0 order by locate('$q',estado) limit 10";
 
$res = mysql_query( $sql );
 
while( $campo = mysql_fetch_array( $res ) ) {
    $id = $campo['id'];
    $estado = $campo['estado'];
    $sigla = $campo['sigla'];
    $estado = addslashes($estado);
    $html = preg_replace("/(" . $q . ")/i", "<span style="\"font-weight:bold\"">\$1</span>", $estado);
    echo "<li onselect="\"this.setText('$estado').setValue('$id','$estado','$sigla');\"">$html ($sigla)</li>\n";
}
?>

De modo simplificado o esquema de como funcionam os dois programas ( este e o tutorial anterior tutorial Ajax e jQuery).

Imagine um sistema de locação de veículos onde, tem vários clientes cadastrados no banco de dados, então o operador do computador começa a digitar o R.G. de um cliente no sistema, o sistema faz uma varredura no banco de dados, selecionando o cliente que tenha este R.G. completo. Então através do sistema de Ajax e jQuery que apresentamos no tutorial anterior completa todos os demais campos com as informações dos clientes, de modo que o operador tem um redução no tempo de busca do cliente, pois não necessita preencher todos os campos com informações de clientes.

Confira o exemplo funcionando.

Utilizando Máscara com jQuery

Máscaras têm uma função muito interessante para programação. Por exemplo, se no formulário de preenchimento de dados onde um usuário esta fazendo um cadastro online, você não quer que no lugar de CEP ele digite letras, o mesmo vale para telefone etc.

Então criamos para esse campos as máscaras com a ajuda do jQuery. Elas irão impedir que o usuário digite algum caractere não estipulado por você. Caso você decida que um campo só poderá ter letras, o usuário não pode colocar um número, e vice versa.

Para tal, utilizaremos o plugin Masked Input (download do arquivo no final do tutorial).

Ao criarmos o formulário, precisamos definir as propriedades dos campos para saber que tipo de valor ele vai aceitar.

Para isso vamos dividir aqui o código em duas partes, porém isso é para mera didática. Na primeira parte do código, vamos chamar o jQuery e o plugin Masked Input. Vamos também indicar quais são os campos do formulário e suas respectivas máscaras:

<html>
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
<title>Criando máscaras com jquery</title>
 
<script type="text/javascript" src="jquery.js"></script>
 
<script type="text/javascript" src="jquery.maskedinput.js"></script>
 
</head>
 
<script type="text/javascript">
 
$(document).ready(function(){
 
$("input.data").mask("99/99/9999");
 
$("input.cpf").mask("999.999.999-99");
 
$("input.cep").mask("99.999-999");
 
});
 
</script>

Considerando a linha $(“input.data”).mask(“99/99/9999”):

Isso significa que os dados neste campo (input com a classe “data”, como indicado entre aspas) vão seguir uma ordem aparecendo no formato de data, ou seja, dias, meses e anos.

Neste exemplo usamos apenas números, porém temos ainda outros parâmetros que podemos usar com:

a – Representa qualquer letra (A-Z,a-z)
9 – Representa qualquer número (0-9)
* – Representa qualquer caractere alfanumérico (A-Z,a-z,0-9)

A segunda parte de nosso código, nós temos o formulário com os campos que iremos colocar os dados(inputs).

<body>
 
<h1>Usando máscaras com jquery</h1>
 
<label for="data">Data:</label><br>
 
<input type="text" class="data" id="data" name="data" /><br><br>
 
  
 
<label for="cpf">CPF:</label><br>
 
<input type="text" class="cpf" id="cpf" name="cpf" /><br><br>
 
  
 
<label for="cep">CEP:</label><br>
 
<input type="text" class="cep" id="cep" name="cep" /><br><br>
 
  
 
</body>
 
</html>

Nesta parte oque fizemos foi criar os campos de Data de CPF e de CEP, para que eles buscassem no começo da página para que cada input tivesse as regras para seguir.

O código completo de nossa página ficou assim:

<html>
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
<title>Criando máscaras com jquery</title>
 
<script type="text/javascript" src="jquery.js"></script>
 
<script type="text/javascript" src="jquery.maskedinput.js"></script>
 
</head>
 
<script type="text/javascript">
 
$(document).ready(function(){
 
$("input.data").mask("99/99/9999");
 
$("input.cpf").mask("999.999.999-99");
 
$("input.cep").mask("99.999-999");
 
});
 
</script>
 
<body>
 
<h1>Usando máscaras com jquery</h1>
 
<label for="data">Data:</label><br>
 
<input type="text" class="data" id="data" name="data" /><br><br>
 
  
 
<label for="cpf">CPF:</label><br>
 
<input type="text" class="cpf" id="cpf" name="cpf" /><br><br>
 
  
 
<label for="cep">CEP:</label><br>
 
<input type="text" class="cep" id="cep" name="cep" /><br><br>
 
  
 
</body>
 
</html>

Confira uma exemplo funcionando.

Arquivos utilizados neste tutorial:

jQuery v1.7.1

Plugin Masked Input

Autor: YESbr

Tutorial de Ajax e jQuery

Como criar um Auto Completar

Utilizando Máscara com jQuery

Support

Support

Support

Support