Avaliação do Usuário

Estrela inativaEstrela inativaEstrela inativaEstrela inativaEstrela inativa
 

Campos para preencher informações de endereço é bem comum nos sites, principalmente em páginas de cadastro de usuário. Para facilitar o cadastro do usuário e diminuir a taxa de rejeição, é possível fazer com que ao informar o CEP, o restante das informações do endereço (logradouro, bairro, cidade, estado) sejam preenchidas automaticamente.

Abaixo segue um exemplo completo e comentado de como implementar esta funcionalidade utilizando a biblioteca jQuery e um webservice grátis ("viacep.com.br") para a consulta do endereço através do CEP.

{code}

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Buscando informações de um endereço através do CEP</title>

</head>

<body>

CEP: <input type="text" id="cep" maxlength="9" placeholder="Ex: 13483-087"/><br/>

Endereço: <input type="text" id="endereco"/><br/>

Bairro: <input type="text" id="bairro"/><br/>

Cidade: <input type="text" id="cidade"/><br/>

UF: <input type="text" id="uf"/>

 

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>

// Registra o evento blur do campo "cep", ou seja, quando o usuário sair do campo "cep" faremos a consulta dos dados

$("#cep").blur(function(){

// Para fazer a consulta, removemos tudo o que não é número do valor informado pelo usuário

var cep = this.value.replace(/[^0-9]/, "");

 

// Validação do CEP; caso o CEP não possua 8 números, então cancela a consulta

if(cep.length!=8){

return false;

}

 

// Utilizamos o webservice "viacep.com.br" para buscar as informações do CEP fornecido pelo usuário.

// A url consiste no endereço do webservice ("http://viacep.com.br/ws/"), mais o cep que o usuário

// informou e também o tipo de retorno que desejamos, podendo ser "xml", "piped", "querty" ou o que

// iremos utilizar, que é "json"

var url = "http://viacep.com.br/ws/"+cep+"/json/";

 

// Aqui fazemos uma requisição ajax ao webservice, tratando o retorno com try/catch para que caso ocorra algum

// erro (o cep pode não existir, por exemplo) o usuário não seja afetado, assim ele pode continuar preenchendo os campos

$.getJSON(url, function(dadosRetorno){

try{

// Insere os dados em cada campo

$("#endereco").val(dadosRetorno.logradouro);

$("#bairro").val(dadosRetorno.bairro);

$("#cidade").val(dadosRetorno.localidade);

$("#uf").val(dadosRetorno.uf);

}catch(ex){}

});

});

</script>

</body>

</html>

{/code}