• Home
• Autores

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.

Copyright 2008 Ajaxianos - Todos os direitos reservados

Switch to our mobile site