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

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

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.

Wender, muito obrigado pela dica do código; veio a calhar!

muito legal o codigo, parabens

tem um outro site com servico de busca de cep:

http://www.buscarcep.com.br/

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.

Este script e OTIMO, parabéns !!!!!

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

Muito bom seu script. Mas ele entra em conflito com o Mootools. Tem como ver isso?
Agradeço!

Tem como fazer isso usando o “Protocol Buffers” da google! Ficaria um pouco mais rápido que o Json.

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 [...]

Ótimo artigo… só esse código adiantou em vários dias meu trabalho!!!

Mto bom kra parabéns.

Cara, parabéns pelo artigo…
Curto, grosso e eficiente… é de artigos assim que precisamos para facilitar nosso dia-a-dia.
Novamente, parabéns.

Abs.

Muiiiiiiiiiiiito obrigado, esse cóodigo salvou meu dia!!!!!
abs

Só tem um problema, quando digito um cep errado a mensagem de erro não aparece =(

Excelente post! O único que achei na net que funcionou!
Muito obrigada!!
Me ajudou demais!

Escreva um Comentário

(obrigatório)

(obrigatório)