Pesquisando CEP usando AJAX

Pesquisando CEP usando AJAX

Uma necessidade comum para quem trabalha com cadastros é padronizar o endereço informado pelo visitante. Algo que se oferece para facilitar o processo de cadastro é preencher o endereço com base no CEP informado.

 Apesar dos Correios não terem um webservice para consulta de CEP, existem vários webservices gratuitos que permitem fazer esta pesquisa. 

 Neste exemplo você vai aprender a fazer uma consulta assíncrona usando Javascript e AJAX.

 Veja o código do nosso formulário:

 

 

O formulário é bem simples, ele tem o nome de "frmCEP" e possui um campo de texto e um botão. Ao consumir o webservice, será preenchida uma div abaixo do formulário com o resultado da pesquisa.

 

No código do formulário, vemos que para o campo de texto foi adicionado um evento onKeyPress, neste evento será chamada uma função com o nome de isNumberKey. Como o evento keypress é chamado ao digitar um caractere dentro do campo, esta função sempre será executada durante a digitação, o objetivo desta função é permitir apenas a digitação de números.

 

 

O botão do formulário tem um evento onclick onde ele chama uma funçao chamada  PesquisarCEP(), esta função recebe como um parâmetro o CEP digitado no campo de texto. A forma de fazer referência ao conteúdo do campo é document.nome_do_formulario.nome_do_campo.value.

 

Para fazer a comunicação assíncrona, ou seja, sem recarregar a página, vamos precisar importar a biblioteca do Jquery.

 

A chamada assincrona terá o seguinte formato

 

No exemplo acima o parâmetro "type" define qual a forma de comunicação (GET ou POST), o parâmetro "URL" guarda o endereço que vamnos consumir, o "datatype" é o formato da comunicação,  no caso vamos trabalhar com JSON, o "error" vai exibir um alerta se a comunicação não for possível.

 

O tratamento do resultado no caso da comunicação ser efetuada com sucesso será feito pelo "done", como o retorno será em JSON, vamos ler o resultado e concatenar numa variável, o conteúdo será impresso numa div chamada "resultado_cep"

 

 

O exemplo completo pode ser visto neste link:

http://www.dbins.com.br/arquivos/exemplo_cep.htm

 

Está começando e deseja saber o que precisa estudar de HTML e JavaScript? Não deixe de conferir os roteiros de estudo de HTML e JavaScript!. São dezenas de conteúdos para você melhorar suas habilidades.

Roteiro de estudos - HTML e CSS

Roteiro de estudos - Javascript

 

Outros conteudos que podem ser de seu interesse

Remover acentos e caracteres especiais com JavaScript
13/10/2019JAVASCRIPT

Remover acentos e caracteres especiais com JavaScript

Aprenda a remover acentos usando JS com apenas uma linha de código

Saiba mais...
Monitorando arquivos com NodeJS
15/12/2019JAVASCRIPT

Monitorando arquivos com NodeJS

Veja como controlar alterações de arquivos numa pasta utilizando NodeJS

Saiba mais...

Conteúdo sobre banco de dados sem complicação!