Veja como é fácil consultar CEPs e carregar dinamicamente o endereço nos campos do seu formulário usando AJAX e jQuery

download-1Olá pessoal, no post de hoje vou demonstrar como consultar CEP usando apenas AJAX e jQuery, vamos carregar os dados do endereço dinamicamente nos campos de um formulário.

Essa funcionalidade melhora a experiência do usuário, previne erros de digitação e consequentemente as informações de endereço gravadas serão mais precisas.

 Para ter acesso a essa base de endereços, vamos consultar um WebService que disponibiliza essas informações.

WebServices para consulta de CEP

Existem alguns WebServices gratuitos para consultar CEP, abaixo indico 2:

Nesse exemplo vamos usar o WebService “RepublicaVirtual“, ele é gratuito e muito estável, tenho vários projetos consultando CEP  nesse WebService e não tenho problemas.

 

Post relacionado:  AJAX com jQuery - Série de vídeos com exemplos

 

Construindo consulta de CEP

Nossa página será simples sem a necessidade de usar PHP ou banco de dados, teremos apenas um formulário com campos básicos de endereço.

Quando for digitado um CEP no campo “cep”, vamos disparar uma requisição AJAX para o WebService e consultar o endereço completo desse CEP, capturamos o retorno e preenchemos os respectivos campos.

Requisitos

Abaixo temos nossa única página:

index.html

 

Explicação do Código para consulta de CEP

1 – Quando o usuário pressionar a tecla “ENTER” o cursor do mouse vai avançar para o próximo campo do formulário.:

Abaixo a rotina para todos os inputs que possuem a classe “pula“, captura a tecla pressionada no evento “keypress“:

 

2 – Coloquei uma máscara no campo “CEP” usando o plugin inputmask, essa prática sempre facilita a vida do usuário e força o formato correto do CEP:

 

3 – A parte que realmente interessa, no evento “blur” (quando o elemento perde o foco) do input “cep” estou chamando a rotina que vai enviar a requisição AJAX para o WebService.

Coloquei uma mensagem para dar um feedback para o usuário quando for disparada a requisição “Aguarde, consultando CEP …”, quando receber o retorno da requisição limpo essa mensagem.

Estou usando a função $.getScript() do jQuery para enviar a requisição AJAX, porque estou solicitando dados no formato de objeto JavaScript, nesse link existem outros formatos de retorno suportados pelo WebService.

Se “resultadoCEP[‘resultado]” retornar preenchido então carrego os valores nos respectivos campos do formulário.

 

Post relacionado:  Aprenda como debugar AJAX sem plugin

 

Resultado Final

Layout do Formulário:

Layout do Formulário

 

Aguardando o retorno da consulta de CEP:

Aguardando Consutar CEP

 

Campos preenchidos após a consulta:

Formulário preenchido após a consulta de CEP

Com isso chego ao final de mais um post, demonstrei como enviar uma requisição AJAX para consultar CEP e carregar dinamicamente o endereço nos devidos campos do formulário.

Espero que tenham gostado, até a próxima …

Baixe o código fonte desse post  Consulta de CEP (249 downloads) .

Se você gostou compartilhe esse post nas redes sociais, ajude o blog DevWilliam a crescer!

Show Buttons
Hide Buttons