Veja como é fácil consultar CEPs e carregar dinamicamente o endereço nos campos do seu formulário usando AJAX e jQuery
Olá pessoal, no post de hoje vou demonstrar como consultar CEP usando apenas AJAX e jQuery, vamos carregar os dados do endereço dinamicamente nos campos de um formulário.
Essa funcionalidade melhora a experiência do usuário, previne erros de digitação e consequentemente as informações de endereço gravadas serão mais precisas.
Para ter acesso a essa base de endereços, vamos consultar um WebService que disponibiliza essas informações.
WebServices para consulta de CEP
Existem alguns WebServices gratuitos para consultar CEP, abaixo indico 2:
Nesse exemplo vamos usar o WebService “RepublicaVirtual“, ele é gratuito e muito estável, tenho vários projetos consultando CEP nesse WebService e não tenho problemas.
Construindo consulta de CEP
Nossa página será simples sem a necessidade de usar PHP ou banco de dados, teremos apenas um formulário com campos básicos de endereço.
Quando for digitado um CEP no campo “cep”, vamos disparar uma requisição AJAX para o WebService e consultar o endereço completo desse CEP, capturamos o retorno e preenchemos os respectivos campos.
Requisitos
Abaixo temos nossa única página:
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 |
<!DOCTYPE html> <html> <head> <title>Consulta de CEP</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <style type="text/css"> input[type='text']{ color: red; } #mensagem{ color: red; } </style> </head> <body> <div class='container'> <br> <fieldset> <legend><h1>Formulário - Consulta de CEP</h1></legend> <form action="action_cliente.php" method="post" id='form-contato' enctype='multipart/form-data'> <div class="row"> <div class="col-md-2"> <div class="form-group"> <label>CEP</label> <input type="text" class="form-control pula" id="cep" maxlength="12" name="cep" placeholder="Informe o CEP"> </div> </div> <div class="col-md-8"> <div class="form-group"> <label>Rua, Logradouro, Travessa <span>*</span> <span id='mensagem'></span></label> <input type="text" class="form-control pula" id="rua" name="rua" placeholder="Informe a Rua, Logradouro, Travessa" required> </div> </div> <div class="col-md-2"> <div class="form-group"> <label>Número</label> <input type="text" class="form-control pula" id="numero" name="numero" placeholder="Informe o Número"> </div> </div> </div> <div class="row"> <div class="col-md-3"> <div class="form-group"> <label>Bairro</label> <input type="text" class="form-control pula" id="bairro" name="bairro" placeholder="Informe o Bairro"> </div> </div> <div class="col-md-3"> <div class="form-group"> <label>Cidade</label> <input type="text" class="form-control pula" id="cidade" name="cidade" placeholder="Informe a Cidade"> </div> </div> <div class="col-md-1"> <div class="form-group"> <label>UF</label> <input type="text" class="form-control pula" id="uf" maxlength="2" name="uf" placeholder="UF"> </div> </div> <div class="col-md-5"> <div class="form-group"> <label>Complemento</label> <input type="text" class="form-control pula" id="complemento" name="complemento" placeholder="Informe o Complemento do Endereço"> </div> </div> </div> <button type="submit" class="btn btn-primary" id='botao'> <i class="fa fa-floppy-o"></i> Gravar </button> </form> </fieldset> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js"></script> <script type="text/javascript"> $(document).ready(function () { // Método para pular campos teclando ENTER $('.pula').on('keypress', function(e){ var tecla = (e.keyCode?e.keyCode:e.which); if(tecla == 13){ campo = $('.pula'); indice = campo.index(this); if(campo[indice+1] != null){ proximo = campo[indice + 1]; proximo.focus(); e.preventDefault(e); } } }); // Inseri máscara no CEP $("#cep").inputmask({ mask: ["99999-999",], keepStatic: true }); // Método para consultar o CEP $('#cep').on('blur', function(){ if($.trim($("#cep").val()) != ""){ $("#mensagem").html('(Aguarde, consultando CEP ...)'); $.getScript("http://cep.republicavirtual.com.br/web_cep.php?formato=javascript&cep="+$("#cep").val(), function(){ if(resultadoCEP["resultado"]){ $("#rua").val(unescape(resultadoCEP["tipo_logradouro"])+" "+unescape(resultadoCEP["logradouro"])); $("#bairro").val(unescape(resultadoCEP["bairro"])); $("#cidade").val(unescape(resultadoCEP["cidade"])); $("#uf").val(unescape(resultadoCEP["uf"])); } $("#mensagem").html(''); }); } }); }); </script> </body> </html> |
Explicação do Código para consulta de CEP
1 – Quando o usuário pressionar a tecla “ENTER” o cursor do mouse vai avançar para o próximo campo do formulário.:
Abaixo a rotina para todos os inputs que possuem a classe “pula“, captura a tecla pressionada no evento “keypress“:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// Método para pular campos teclando ENTER $('.pula').on('keypress', function(e){ var tecla = (e.keyCode?e.keyCode:e.which); if(tecla == 13){ campo = $('.pula'); indice = campo.index(this); if(campo[indice+1] != null){ proximo = campo[indice + 1]; proximo.focus(); e.preventDefault(e); } } }); |
2 – Coloquei uma máscara no campo “CEP” usando o plugin inputmask, essa prática sempre facilita a vida do usuário e força o formato correto do CEP:
|
1 2 3 4 5 |
// Inseri máscara no CEP $("#cep").inputmask({ mask: ["99999-999",], keepStatic: true }); |
3 – A parte que realmente interessa, no evento “blur” (quando o elemento perde o foco) do input “cep” estou chamando a rotina que vai enviar a requisição AJAX para o WebService.
Coloquei uma mensagem para dar um feedback para o usuário quando for disparada a requisição “Aguarde, consultando CEP …”, quando receber o retorno da requisição limpo essa mensagem.
Estou usando a função $.getScript() do jQuery para enviar a requisição AJAX, porque estou solicitando dados no formato de objeto JavaScript, nesse link existem outros formatos de retorno suportados pelo WebService.
Se “resultadoCEP[‘resultado]” retornar preenchido então carrego os valores nos respectivos campos do formulário.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// Método para consultar o CEP $('#cep').on('blur', function(){ if($.trim($("#cep").val()) != ""){ $("#mensagem").html('(Aguarde, consultando CEP ...)'); $.getScript("http://cep.republicavirtual.com.br/web_cep.php?formato=javascript&cep="+$("#cep").val(), function(){ if(resultadoCEP["resultado"]){ $("#rua").val(unescape(resultadoCEP["tipo_logradouro"])+" "+unescape(resultadoCEP["logradouro"])); $("#bairro").val(unescape(resultadoCEP["bairro"])); $("#cidade").val(unescape(resultadoCEP["cidade"])); $("#uf").val(unescape(resultadoCEP["uf"])); } $("#mensagem").html(''); }); } }); |
Resultado Final
Layout do Formulário:
Aguardando o retorno da consulta de CEP:
Campos preenchidos após a consulta:
Com isso chego ao final de mais um post, demonstrei como enviar uma requisição AJAX para consultar CEP e carregar dinamicamente o endereço nos devidos campos do formulário.
Espero que tenham gostado, até a próxima …
Baixe o código fonte desse post Consulta de CEP (1342 downloads) .
Se você gostou compartilhe esse post nas redes sociais, ajude o blog DevWilliam a crescer!
