Busca de CEP 100% Ajax
Algum tempo atrás eu publiquei para o iMasters uma matéria sobre busca de endereço pelo CEP, no exemplo eu usei um pouco de jQuery e ColdFusion, mas para este exemplo eu vou utilizar 100% ajax, graças ao retorno fornecido pelo site http://cep.republicavirtual.com.br/
Para este exemplo, vamos utilizar somente a lib jQuery
Vou usar um formulário simples para exemplo, com somente os campos que preciso:
O formulário é simples, a única coisa diferente é o atributo “onBlur” no campo “cep”
o onBlur executa um comando javascript assim que o campo perde o fóco, neste caso eu chamo a função javascript “getEndereco()”
<form> <fieldset> <legend>Formulário de exemplo</legend> <label for="cep">CEP:</label> <input id="cep" maxlength="8" name="cep" size="9" onBlur="getEndereco()"/> <label for="rua">Logadouro:</label> <input id="rua" name="rua" size="50" /> <label for="bairro">Bairro:</label> <input id="bairro" name="bairro" size="30" /> <label for="cidade">Cidade:</label> <input id="cidade" name="cidade" /> <label for="estado">Estado</label> <input id="estado" maxlength="2" name="estado" size="2" /> </fieldset> </form>
Não esquecendo de fazer o include da lib do jQuery
Este será o Script
// Função única que fará a transação
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["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"]));
}else{
alert("Endereço não encontrado");
}
});
}
}
Os arquivos deste exemplo você pode baixar aqui http://www.ajaxianos.com.br/arquivos/cepSomentejQuery.zip
Se você gostou deste post, escreva um comentário e/ou cadastre-se em nosso feed.
Comentários
Olá, Wender, o codigo ficaria mais facil se utilizasse
$(“#cep”).blur(function(){
(codigos)
})
ao invés de function getEndereco(){
(codigos)
}
Mas, mesmo assim ficou funcional.
Parabéns.
Eu não quis fazer bind, porque ja tive problemas com isso, mas ultimamente esta mais estável, valeu cara!
Cara, muito legal. Gostaria de saber se eu quiser pegar o CEP da minha base de dados no MySql, qual alteração deveria ser feita. Grato.
muito legal o codigo, parabens
tem um outro site com servico de busca de cep:
ja traz varios exemplos de codigo e tem retorno tambem em XML
Muito bom esse código, mais como ele ficaria para o outro serviço http://www.buscarcep.com.br/ onde ele buscaria de um ou de outro?
Como são serviços free podem apresentar problemas.
Também queria saber como ficaria para o http://www.buscarcep.com.br
Caso alguém saiba, poderia me enviar?
mauricio.home@gmail.com
Teria que fazer uma adaptação do código, tem um exemplo em jquery já
http://www.buscarcep.com.br/exemplos/buscar_cep_jquery.zip
Achei alguma coisa parecida no google: http://code.google.com/intl/pt-BR/apis/maps/documentation/reference.html veja:
Show de bola… Simples e prático…
Utilizei o $(“#campo”).blur(function(){…}); assim como o Nathan Dias…
Abcs
[...] o blog com mais uma dica utilizando o jQuery, implementado a partir do artigo encontrado no blog “Ajaxianos” do Vander [...]
Cara, parabéns pelo artigo…
Curto, grosso e eficiente… é de artigos assim que precisamos para facilitar nosso dia-a-dia.
Novamente, parabéns.
Abs.
Excelente!
Obrigado pela ajuda. Ajudou muito e vou utilizar estes códigos em meus sites.
Grande abraço!!
Tiago Sampaio
Cara, foi muito bom este post, mas eu tenho uma dúvida:
Como faço para preencher uma select box no lugar do input. É que meu campo estado é uma select box.
Parabéns!
Você pode manter seu select com todos os estados e com o retorno só mudar o atributo selected
Ex:
//Desmarca o item selecionado
$(“#estado option:selected”).removeAttr(“selected”);
//Marca o item com o valor do retorno do CEP
$(“#estado option[value="+resultadoCEP["uf"]+”]”).attr(“selected”,true);
[]s
Wender Lima
http://wender.com.br
Fala ai fera cara gostei do seu site tem umas paradas massa igual pr amim que estou começando com jquery gostei de algumas coisas continue com esse trabalho valeu