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://viacep.com.br/
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.
Vamos criar nossa estrutura html, no arquivo index.html:
<!doctype html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <title>Consultar CEP via AJAX com jQuery</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> </head> <body> <div class="container"> <div class="page-header"> <h1 class="text-center">Consultar CEP via Ajax com jQuery</h1> </div> <form class="form-horizontal"> <div class="form-group"> <label for="cep">CEP</label> <input type="text" class="form-control" name="cep" placeholder="CEP" /> </div> <div class="form-group"> <label for="rua">Rua</label> <input type="text" class="form-control" name="rua" placeholder="Rua" /> </div> <div class="form-group"> <label for="rua">Bairro</label> <input type="text" class="form-control" name="bairro" placeholder="Bairro" /> </div> <div class="form-group"> <label for="cidade">Cidade</label> <input type="text" class="form-control" name="cidade" placeholder="Cidade" /> </div> <div class="form-group"> <label for="uf">Estado (UF)</label> <input type="text" class="form-control" name="uf" placeholder="Estado" /> </div> </form> </div> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script type="text/javascript" src="js/cep.js"></script> </body> </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
$(document).ready(function(){ $("input[name=cep]").blur(function(){ var cep = $(this).val().replace(/[^0-9]/, ''); if(cep){ var url = 'https://viacep.com.br/ws/'+cep+'/json/'; $.ajax({ url: url, dataType: 'jsonp', crossDomain: true, contentType: "application/json", success : function(json){ if(json.logradouro){ $("input[name=rua]").val(json.logradouro); $("input[name=bairro]").val(json.bairro); $("input[name=cidade]").val(json.localidade); $("input[name=uf]").val(json.estado); } } }); } }); });
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://www.mxcursos.com/blog/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.