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):
$(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')
});
}
});
});
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