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

Permutação e combinação com JavaScript
22/12/2024JAVASCRIPT

Permutação e combinação com JavaScript

Veja como calcular permutações e combinações com JavaScript

Saiba mais...
As mensagens de erro mais comuns no JavaScript
04/10/2020JAVASCRIPT

As mensagens de erro mais comuns no JavaScript

Um resumo com as mensagens de erro mais comuns do JavaScript

Saiba mais...

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