Consultando CEP em ajax com jQuery

Quando fazermos algum tipo de cadastro, onde necessita de endereço, um recurso interessante é retornar as informações desse endereço, utilizando o CEP. A pessoa digitaria o CEP, e os campos de endereço seriam preenchidos. E nesse tutorial, vou mostrar uma forma de realizar esse procedimento.

Primeira coisa, é saber onde iremos buscar essa informação. Vou utilizar como fonte, uma API, com acesso gratuito, disponibilizada pela empresa Aviso Brasil.

A URL de acesso seria

http://cep.correiocontrol.com.br/NUMERO_DO_CEP.json

Exemplo:

http://cep.correiocontrol.com.br/26255170.json

Primeira coisa vamos montar o nosso HTML

 <form action="" method="post">
            <label for="cep"> CEP: </label> <input type="text" name="cep" id="cep" />
<!--Caso não exista o CEP, irá mostrar uma mensagem aqui-->
<div id="mensagemErro" class="ocultar"></div>
<!--Aqui onde estarão os campos que serão preenchidos-->
<div id="boxCampos" class="ocultar">
                <label for="rua">Rua</label> <input type="text" name="rua" id="rua" />
<label for="bairro">Bairro</label> <input type="text" name="bairro" id="bairro" /></label>
<label for="cidade">Cidade</label> <input type="text" name="cidade" id="cidade" /></label>
<label for="uf">UF</label> <input type="text" name="uf" id="uf" /></label></div>
</form>

Esse formulário, terá o campo para o CEP, uma div#mensagemErro, onde será adicionado uma mensagem de erro. E outra div#boxCampos, onde estarão os campos que serão preenchidos. Veja que tanto em div#mensagemErro quanto em div#boxCampos, tem uma classe chamado ocultar. Essa classe, será apenas para controle de visualização dos campos, pelo javascript, podemos removê-la, assim mostrar os itens que queremos.

Vamos ao CSS, que no caso, só vamos definir a class ocultar.

<style type="text/css">
     .ocultar{display:none}
 </style>

Precisamos agora chamar o jQuery pra nossa página, usaremos CDN do Google para isso:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Agora vamos ao nosso script, que fará a consulta (o código está comentado):

 $(function(){
                /**
                 * Atribuo ao elemento #cep, o evento blur
                 * Blur, dispara uma ação, quando o foco
                 * sair do elemento, no nosso caso cep 
                 */
                $("#cep").blur(function(){
                    /**
                     * Resgatamos o valor do campo #cep
                     * usamos o replace, pra remover tudo que não for numérico,
                     * com uma expressão regular
                     */
                    var cep     = $(this).val().replace(/[^0-9]/, ''); 
                    //Armazena a referência da div#boxCampos
                    var boxes   = $("#boxCampos");
                     //Armazena a referência da div#mensagemErro
                    var msgErro = $("#mensagemErro");

                    /**
                     * Por padrão, vamos ocultar
                     * div#boxCampos e também #mensagemErro
                     */
                    boxes.addClass('ocultar');
                    msgErro.addClass('ocultar');

                    //Verifica se não está vazio
                    if(cep !== ""){
                         //Cria variável com a URL da consulta, passando o CEP
                         var url = 'http://cep.correiocontrol.com.br/'+cep+'.json';

                         /**
                          * Fazemos um requisição a URL, como vamos retornar json, 
                          * usamos o método $.getJSON;
                          * Que é composta pela URL, e a função que vai retorna os dados
                          * o qual passamos a variável json, para recuperar os valores
                          */
                         $.getJSON(url, function(json){
                                //Atribuimos o valor aos inputs
                                $("#rua").val(json.logradouro);
                                $("#bairro").val(json.bairro);
                                $("#cidade").val(json.localidade);
                                $("#uf").val(json.uf);
                                /**
                                 * Removemos a classe ocultar, para mostrar os campos
                                 * preenchidos
                                 */
                                boxes.removeClass('ocultar');

                                //Usamos o método fail, caso não retorne nada
                            }).fail(function(){
                             //Não retornando um valor válido, ele mostra a mensagem
                             msgErro.removeClass('ocultar').html('CEP inexistente')
                        });
                    }
                });
            });

Juntando tudo, ficará assim:

<!doctype html>
<html lang="pt-br">
    <head>
        <title>Exemplo da consulta de CEP</title>
        <meta charset="UTF-8">
        <style type="text/css">
            .ocultar{display:none}            
        </style>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                /**
                 * Atribuo ao elemento #cep, o evento blur
                 * Blur, dispara uma ação, quando o foco
                 * sair do elemento, no nosso caso cep 
                 */
                $("#cep").blur(function(){
                    /**
                     * Resgatamos o valor do campo #cep
                     * usamos o replace, pra remover tudo que não for numérico,
                     * com uma expressão regular
                     */
                    var cep     = $(this).val().replace(/[^0-9]/, ''); 
                    //Armazena a referência da div#boxCampos
                    var boxes   = $("#boxCampos");
                     //Armazena a referência da div#mensagemErro
                    var msgErro = $("#mensagemErro");

                    /**
                     * Por padrão, vamos ocultar
                     * div#boxCampos e também #mensagemErro
                     */
                    boxes.addClass('ocultar');
                    msgErro.addClass('ocultar');

                    //Verifica se não está vazio
                    if(cep !== ""){
                         //Cria variável com a URL da consulta, passando o CEP
                         var url = 'http://cep.correiocontrol.com.br/'+cep+'.json';

                         /**
                          * Fazemos um requisição a URL, como vamos retornar json, 
                          * usamos o método $.getJSON;
                          * Que é composta pela URL, e a função que vai retorna os dados
                          * o qual passamos a variável json, para recuperar os valores
                          */
                         $.getJSON(url, function(json){
                                //Atribuimos o valor aos inputs
                                $("#rua").val(json.logradouro);
                                $("#bairro").val(json.bairro);
                                $("#cidade").val(json.localidade);
                                $("#uf").val(json.uf);
                                /**
                                 * Removemos a classe ocultar, para mostrar os campos
                                 * preenchidos
                                 */
                                boxes.removeClass('ocultar');

                                //Usamos o método fail, caso não retorne nada
                            }).fail(function(){
                             //Não retornando um valor válido, ele mostra a mensagem
                             msgErro.removeClass('ocultar').html('CEP inexistente')
                        });
                    }
                });
            });
        </script>
    </head>
    <body>
        <form action="" method="post">
            <label for="cep"> CEP: </label> <input type="text" name="cep" id="cep" />
<!--Caso não exista o CEP, irá mostrar uma mensagem aqui-->
<div id="mensagemErro" class="ocultar"></div>
<!--Aqui onde estarão os campos que serão preenchidos-->
<div id="boxCampos" class="ocultar">
                <label for="rua">Rua</label> <input type="text" name="rua" id="rua" />
<label for="bairro">Bairro</label> <input type="text" name="bairro" id="bairro" /></label>
<label for="cidade">Cidade</label> <input type="text" name="cidade" id="cidade" /></label>
<label for="uf">UF</label> <input type="text" name="uf" id="uf" /></label></div>
</form>
    </body>
</html>

Você pode ver em funcionamento, clicando aqui: Exemplo

Espero que tenha ajudado, e até a próxima




Se o conteúdo foi relevante para você, e desejar, você pode incentivar fazendo uma doação.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *