Busca de endereço completo por CEP com jQuery e jSONP

Para aqueles que procura um script fácil e simples para o preenchimento de formulário de endereço, nesse post vamos mostrar um script feito com JQuery e jSONP, onde tem um formulário que recebe um CEP, logo depois é enviado para um site que tenha os registros de todos os CEPs, e assim retornando automaticamente a rua, bairro, cidade e estado.

</pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Busca por CEP com jQuery</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
function getEndereco() {
// Se o campo CEP não estiver vazio
if($.trim($("#cep").val()) != ""){
/*
Para conectar no serviço e executar o json, precisamos usar a função
getScript do jQuery, o getScript e o dataType:"jsonp" conseguem fazer o cross-domain, os outros
dataTypes não possibilitam esta interação entre domínios diferentes
Estou chamando a url do serviço passando o parâmetro "formato=javascript" e o CEP digitado no formulário
http://cep.republicavirtual.com.br/web_cep.php?formato=javascript&cep="+$("#cep").val()
*/
$.getScript("http://cep.republicavirtual.com.br/web_cep.php?formato=javascript&cep="+$("#cep").val(), function(){
// o getScript dá um eval no script, então é só ler!
//Se o resultado for igual a 1

if (resultadoCEP["tipo_logradouro"] != '') {
if (resultadoCEP["resultado"]) {
// troca o valor dos elementos
$("#rua").val(unescape(resultadoCEP["tipo_logradouro"]) + " " + unescape(resultadoCEP["logradouro"]));
$("#bairro").val(unescape(resultadoCEP["bairro"]));
$("#cidade").val(unescape(resultadoCEP["cidade"]));
$("#estado").val(unescape(resultadoCEP["uf"]));
$("#numero").focus();
}
}
});
}
}
</script>
</head>

<body>
<form>
CEP
<input type="text" name="cep" id="cep" class="inputs" onblur="getEndereco()"/><br/>
Rua
<input type="text" id="rua"/><br/>
Bairro
<input type="text" id="bairro"/><br/>
Cidade
<input type="text" id="cidade"/><br/>
UF
<input type="text" id="estado"/><br/>
</form>
</body>
</html>
<pre>

Confira o exemplo:
http://projetos.lucaspeperaio.com.br/busca-por-cep-jquery/

Comentários