William Luis

0 %
William Luis
Fullstack Developer
  • Residence:
    Canada
  • City:
    Toronto
  • Age:
    26
French
English
Spanish
html
CSS
Js
PHP
WordPress
  • Bootstrap, Materialize
  • Stylus, Sass, Less
  • Gulp, Webpack, Grunt
  • GIT knowledge

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

1 de janeiro de 2012

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.

[sourcecode language=”Javascript”]</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>

[/sourcecode]

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

Posted in Dicas, JQueryTags:
1 Comment
  • elisei

    alguem sabe como mudar para correio mobile?

    12:29 25 de agosto de 2012 Responder
Write a comment