Blog do MX Cursos

Consultar CEP com Ajax utilizando jQuery

Consultar CEP com Ajax utilizando jQuery
Avaliar post

Ao desenvolvemos qualquer tipo de aplicação onde usuário precise preencher o endereço, devemos nos atentar com a facilidade automatização para não tornar este processo desagradável. Uma forma de amenizar esse processo pra usuário é retornar essas informações de forma automática a partir da inclusão do CEP.

Ao digitar o CEP, os demais campos do endereço são preenchidos automaticamente. Mas como isso seria possível?

Os correios possuem uma API (Application Programming Interface). Trata-se de um conjunto de rotinas e padrões de programação para acesso a um aplicativo de software ou plataforma baseado na Web.

Entretanto, é preciso primeiro saber onde iremos realizar essa consulta.

Neste tutorial iremos utilizar esta API dos correios: https://correiosapi.apphb.com

Nossa estrutura de arquivos e pastas para esse tutorial ficará assim:

  • js/
    • cep.js
  • index.html

Iremos utilizar também para estilização do formulário o Bootstrap do Twitter, e para consulta utilizaremos o jQuery.

jqueryVamos criar nossa estrutura html, no arquivo index.html:

Explicando o código acima:

  • Na linha 6, chamamos o arquivo bootstrap.min.css, de uma CDN, para realizar estilização do formulário;
  • Na linha 13 a 37, criamos um formulário comum, apenas com a estrutura para utilizar o estilo do Bootstrap;
  • Na linha 39 a 40, chamamos o jQuery do CDN e também o script cep.js, que irá conter a consulta à API.

Agora iremos ao arquivo cep.js

Explicando o código acima:

  • Na linha 1, inicia o jQuery para iniciar depois de carregar o DOM;
  • Na linha 2, seleciona input cujo o name CEP atribui o evento blur e será executa uma função, caso clique fora do campo selecionado;
  • Na linha 3, criamos uma variável cep, que recebe o valor do CEP e remove tudo diferente de 0-9, usando replace;
  • Na linha 4, verificamos se tem algum valor na variável cep para dar continuação ao script;
  • Na Linha 5, criamos a variável url que define onde será feito a requisição, passando o CEP para API;
  • Na linha 6 chamamos o evento $.ajax;
  • Na linha 7, definimos a url da requisição;
  • Na linha 8, definimos o tipo de dados que você espera do retorno, no nosso caso o JSONP;
  • Na linha 9, permitimos o redirecionamento ao realizar a requisição;
  • Na linha 10, informamos o tipo de conteúdo que será enviado na requisição;
  • Na linha 11 a 18, resgatamos o retorno se for com sucesso e atribuímos a cada item do formulário o valor retornado.

Para ver o funcionamento do script:

https://blog.mxcursos.com/exemplos/cep

Para baixar o script criado no tutorial:

https://github.com/davidchc/tutorial-consultar-cep-ajax

Gostou do artigo? Compartilhe!

Se tiver quaisquer dúvidas, é só deixar um comentário.

David CHC

David CHC

Trabalha com desenvolvimento web há 10 anos, atuou como programador líder do MX Cursos por mais de 8 anos e hoje dedica-se exclusivamente à criação de cursos para a plataforma. Possui vasto conhecimento em PHP, Javascript, HTML5, CSS3, Gulp.js, GIT, MySQL

Clube de Cursos

Conheça nosso Clube de Cursos e potencialize suas habilidades em Produção e Edição de Vídeos, Design, Marketing Digital, Programaço, WordPress, 3D e Modelagem, Motion Graphics e muito mais!

CONHEÇA O CLUBE

Your Header Sidebar area is currently empty. Hurry up and add some widgets.

Newsletter

Newsletter

Receba em seu e-mail conteúdos semanais sobre desenvolvimento, design, audiovisual e tecnlogia.

Inscrição realizada com sucesso!