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:
Iremos utilizar também para estilização do formulário o Bootstrap do Twitter, e para consulta utilizaremos o jQuery.
<!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:
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:
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.
Nos últimos anos, testemunhamos uma revolução na forma como os sites são criados, impulsionada pelo…
A animação 3D tem sido uma forma poderosa de contar histórias e criar experiências visuais…
Nos últimos anos, a inteligência artificial (IA) tem revolucionado a forma como criamos e editamos…
Nos últimos anos, a integração da inteligência artificial (IA) na criação de sites tem revolucionado…
Nos últimos anos, a edição de vídeo evoluiu rapidamente com o avanço da tecnologia, e…
A dublagem de filmes desempenha um papel fundamental na indústria cinematográfica, permitindo que obras de…
This website uses cookies.
Ver comentários
Não está funcionando mais.
Eu encontrei uma função JS e ajax que usa um servidor diferente, e é bem parecida, está funcionando.
mas meu form tem vários conjuntos de endereços, e não consigo modificar ela pra funcionar assim.
mano pode me fornecer essa função ai que funciona
Muito bom Davi! Recentemente desenvolvi um plugin totalmente customizável com menos de 1,7kb https://github.com/vsilva472/jquery-viacep