Quando fazermos algum tipo de cadastro, onde necessita de endereço, um recurso interessante é retornar as informações desse endereço, utilizando o CEP. A pessoa digitaria o CEP, e os campos de endereço seriam preenchidos. E nesse tutorial, vou mostrar uma forma de realizar esse procedimento.
Primeira coisa, é saber onde iremos buscar essa informação. Vou utilizar como fonte, uma API, com acesso gratuito, disponibilizada pela empresa Aviso Brasil.
A URL de acesso seria
http://cep.correiocontrol.com.br/NUMERO_DO_CEP.json
Exemplo:
http://cep.correiocontrol.com.br/26255170.json
Primeira coisa vamos montar o nosso HTML
<form action="" method="post"> <label for="cep"> CEP: </label> <input type="text" name="cep" id="cep" /> <!--Caso não exista o CEP, irá mostrar uma mensagem aqui--> <div id="mensagemErro" class="ocultar"></div> <!--Aqui onde estarão os campos que serão preenchidos--> <div id="boxCampos" class="ocultar"> <label for="rua">Rua</label> <input type="text" name="rua" id="rua" /> <label for="bairro">Bairro</label> <input type="text" name="bairro" id="bairro" /></label> <label for="cidade">Cidade</label> <input type="text" name="cidade" id="cidade" /></label> <label for="uf">UF</label> <input type="text" name="uf" id="uf" /></label></div> </form>Esse formulário, terá o campo para o CEP, uma div#mensagemErro, onde será adicionado uma mensagem de erro. E outra div#boxCampos, onde estarão os campos que serão preenchidos. Veja que tanto em div#mensagemErro quanto em div#boxCampos, tem uma classe chamado ocultar. Essa classe, será apenas para controle de visualização dos campos, pelo javascript, podemos removê-la, assim mostrar os itens que queremos.
Vamos ao CSS, que no caso, só vamos definir a class ocultar.
<style type="text/css"> .ocultar{display:none} </style>Precisamos agora chamar o jQuery pra nossa página, usaremos CDN do Google para isso:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Agora vamos ao nosso script, que fará a consulta (o código está comentado):
[javascript]
$(function(){
/**
* Atribuo ao elemento #cep, o evento blur
* Blur, dispara uma ação, quando o foco
* sair do elemento, no nosso caso cep
*/
$("#cep").blur(function(){
/**
* Resgatamos o valor do campo #cep
* usamos o replace, pra remover tudo que não for numérico,
* com uma expressão regular
*/
var cep = $(this).val().replace(/[^0-9]/, ”);
//Armazena a referência da div#boxCampos
var boxes = $("#boxCampos");
//Armazena a referência da div#mensagemErro
var msgErro = $("#mensagemErro");/**
* Por padrão, vamos ocultar
* div#boxCampos e também #mensagemErro
*/
boxes.addClass(‘ocultar’);
msgErro.addClass(‘ocultar’);//Verifica se não está vazio
if(cep !== ""){
//Cria variável com a URL da consulta, passando o CEP
var url = ‘http://cep.correiocontrol.com.br/’+cep+’.json’;/**
* Fazemos um requisição a URL, como vamos retornar json,
* usamos o método $.getJSON;
* Que é composta pela URL, e a função que vai retorna os dados
* o qual passamos a variável json, para recuperar os valores
*/
$.getJSON(url, function(json){
//Atribuimos o valor aos inputs
$("#rua").val(json.logradouro);
$("#bairro").val(json.bairro);
$("#cidade").val(json.localidade);
$("#uf").val(json.uf);
/**
* Removemos a classe ocultar, para mostrar os campos
* preenchidos
*/
boxes.removeClass(‘ocultar’);//Usamos o método fail, caso não retorne nada
}).fail(function(){
//Não retornando um valor válido, ele mostra a mensagem
msgErro.removeClass(‘ocultar’).html(‘CEP inexistente’)
});
}
});
});
[/javascript]Juntando tudo, ficará assim:
<!doctype html> <html lang="pt-br"> <head> <title>Exemplo da consulta de CEP</title> <meta charset="UTF-8"> <style type="text/css"> .ocultar{display:none} </style> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ /** * Atribuo ao elemento #cep, o evento blur * Blur, dispara uma ação, quando o foco * sair do elemento, no nosso caso cep */ $("#cep").blur(function(){ /** * Resgatamos o valor do campo #cep * usamos o replace, pra remover tudo que não for numérico, * com uma expressão regular */ var cep = $(this).val().replace(/[^0-9]/, ''); //Armazena a referência da div#boxCampos var boxes = $("#boxCampos"); //Armazena a referência da div#mensagemErro var msgErro = $("#mensagemErro"); /** * Por padrão, vamos ocultar * div#boxCampos e também #mensagemErro */ boxes.addClass('ocultar'); msgErro.addClass('ocultar'); //Verifica se não está vazio if(cep !== ""){ //Cria variável com a URL da consulta, passando o CEP var url = 'http://cep.correiocontrol.com.br/'+cep+'.json'; /** * Fazemos um requisição a URL, como vamos retornar json, * usamos o método $.getJSON; * Que é composta pela URL, e a função que vai retorna os dados * o qual passamos a variável json, para recuperar os valores */ $.getJSON(url, function(json){ //Atribuimos o valor aos inputs $("#rua").val(json.logradouro); $("#bairro").val(json.bairro); $("#cidade").val(json.localidade); $("#uf").val(json.uf); /** * Removemos a classe ocultar, para mostrar os campos * preenchidos */ boxes.removeClass('ocultar'); //Usamos o método fail, caso não retorne nada }).fail(function(){ //Não retornando um valor válido, ele mostra a mensagem msgErro.removeClass('ocultar').html('CEP inexistente') }); } }); }); </script> </head> <body> <form action="" method="post"> <label for="cep"> CEP: </label> <input type="text" name="cep" id="cep" /> <!--Caso não exista o CEP, irá mostrar uma mensagem aqui--> <div id="mensagemErro" class="ocultar"></div> <!--Aqui onde estarão os campos que serão preenchidos--> <div id="boxCampos" class="ocultar"> <label for="rua">Rua</label> <input type="text" name="rua" id="rua" /> <label for="bairro">Bairro</label> <input type="text" name="bairro" id="bairro" /></label> <label for="cidade">Cidade</label> <input type="text" name="cidade" id="cidade" /></label> <label for="uf">UF</label> <input type="text" name="uf" id="uf" /></label></div> </form> </body> </html>Você pode ver em funcionamento, clicando aqui: Exemplo
Espero que tenha ajudado, e até a próxima