Localização de endereço através do CEP usando jQuery

Nesse tutorial vou mostrar como facilitar o preenchimento de formulário que contenha campos de endereço, tornando seu preenchido automático para alguns campos.

Comente abaixo Jonathan Lamim (@jlamim)

Nesse tutorial vou mostrar como facilitar o preenchimento de formulário que contenha campos de endereço. Quanto menos o usuário tiver que digitar para preencher um formulário, mais feliz ele ficará.

Para esse tutorial nós vamos utilizar o web service da República Virtual, para fazermos a localização a partir do CEP e também a última versão da biblioteca jQuery.

Antes de começarmos a escrever os códigos, é preciso saber as informações que devem ser enviadas ao web service e o seu endereço para requisição. Vejamos:

URL WebService: http://cep.republicavirtual.com.br/web_cep.php

Variáveis de entrada
cep: númerico com 8 dígitos (Ex: 90200971)
formato: xml, json, query_string ou javascript

Agora que já sabemos quais informações precisam ser enviadas ao web service, podemos começar a desenvolver o código.

Antes de mais nada certifique-se dos seguintes itens:

- Ter feito o download da última versão da biblioteca jQuery;
- Ter um editor de texto para escrever os códigos;
- Ter instalado o Firefox ou outro navegador para poder testar os códigos escritos;
- Criar uma pasta para salvar os arquivos deste tutorial;

Vamos começar criando o formulário que o usuário deverá preencher. Não utilizaremos muitos campos nesse tutorial, somente os campos de cep, cidade e estado. Você pode ficar a vontade para colocar no formulário os campos que forem preciso.

Abra o editor de textos e antes de escrever o código salve o arquivo com o nome "form.html", dentro da pasta criada. Após salvar digite o código a seguir e depois salve o arquivo novamente.

Ao digitar, substitua "localizacao_do_arquivo_jquery" pelo caminho do arquivo ".js" da biblioteca jQuery e substitua também "localizacao_do_arquivo_com_o_codigo_js" pelo endereço de localização do arquivo da biblioteca jQuery, só que ao invés de chamar a biblioteca, você chamará o arquivo "getEndereco.js".


<html>
    <head>
        <title>Localização de endereço através do CEP usando jQuery e PHP</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="localizacao_do_arquivo_jquery" type="text/javascript"></script>
    <script src="localizacao_do_arquivo_com_o_codigo_js" type="text/javascript"></script>        
    </head>
    <body>
        Cep: <input type="text" maxlength="8" value="" id="cep"/><input type="button" id="getEndereco" value="Pesquisar"/><br/>
        <p id="loadingCep"></p>
        Cidade: <input type="text" readonly="readonly" id="cidade"/><br/>
        Estado: <input type="text" readonly="readonly" id="estado"/>
    </body>
</html>


Se você reparar, o único campo que está disponível para edição é o do CEP, os demais (cidade e estado) estão bloqueados, pois serão preenchidos automaticamente.

O botão "Pesquisar" é o responsável por executar a operação de pesquisa, enviando o CEP informado para o web service, e retornando os dados encontrados, ou até mesmos erros.

A tag < p > com o id loadingCep será a responsável por exibir as mensagens retornadas, conforme a execução da pesquisa.

Com o código do formulário pronto, crie um arquivo JS e salve-o com o nome de "getEndereco.js", na mesma pasta onde está o arquivo da biblioteca jQuery. Em seguida, digite o código abaixo:


function getEndereco(cep) {
    if($.trim(cep) != ""){
        $("#loadingCep").html('Pesquisando...');
        $.getScript("http://cep.republicavirtual.com.br/web_cep.php?formato=javascript&cep="+cep, function(){            
            if (resultadoCEP["resultado"] != 0) {
                $("#cidade").val(unescape(resultadoCEP["cidade"]));
                $("#estado").val(unescape(resultadoCEP["uf"]));
            }else{
                $("#loadingCep").html(unescape(resultadoCEP["resultado_txt"]));                
            }            
        });
    }
    else{
        $("#loadingCep").html('Informe o CEP');
    }
}


Nesse arquivo temos somente uma função, a getEndereço(cep), que precisa de um parâmetro, que é o cep informado pelo usuário.

Começamos a função verificando se o cep foi informado, se ele estiver em branco, emitimos um alerta para o usuário. caso tenha sido preenchido, seguimos com a verificação.

Para enviar a requisição ao web service, usamos o método $.getScript, do jQuery, que é muito similar ao $.ajax. Passamos nesse método o parâmetro que corresponde à url do web service, incluindo as informações obrigatórias, que são o cep e o formato. Para esse exemplo vamos usar o formato "javascript" que irá nos retornar um array com as informações.

Veja um exemplo do array retornado:


var resultadoCEP = {
    'uf'             : 'RS',
    'cidade'         : 'Porto%20Alegre',
    'bairro'         : 'Passo%20D%27Areia',
    'tipo_logradouro'     : 'Avenida',
    'logradouro'         : 'Assis%20Brasil',
    'resultado'         : '1',
    'resultado_txt'     : 'sucesso%20-%20cep%20completo'
}


Os dados retornados na chave "resultado" e "resultado_txt" podem variar. A seguir veja quais podem ser essas variações:


var resultadoCEP = { 
    'uf' : 'ES', 
    'cidade' : 'Marata%EDzes', 
    'bairro' : '', 
    'tipo_logradouro' : '', 
    'logradouro' : '',     
    'resultado' : '2', 
    'resultado_txt' : 'sucesso%20-%20cep%20%FAnico' 
}


Nesse caso, não há informações sobre o nome da rua, o tipo de logradouro (rua, avenida, travessa ou outros) e o bairro. O resultado informado é "2" e o resultado_txt é "sucesso - cep único".


var resultadoCEP = { 
    'uf' : '', 
    'cidade' : '', 
    'bairro' : '', 
    'tipo_logradouro' : '', 
    'logradouro' : '', 
    'resultado' : '0', 
    'resultado_txt' : 'servi%E7o%20indispon%EDvel%2Fcep%20inv%E1lido' 
}


Se o resultado for "0", então é porque o cep não foi encontrado ou o serviço está indisponível.

Essas informações são importantes para que você possa fazer uma validação mais precisa e informar ao usuário o que ocorreu.

Quando chamamos o método getScript, ele automaticamente já retorna os dados vindos do web service, nesse caso, o array resultadoCEP. Com o array, fazemos então a verificação se o resultado é diferente de "0" (zero), pois se for, então não ocorreram erros, e o cep é válido. Se ocorrer algum erro, então informamos ao usuário. Repare que é utilizado o método "unescape" sempre que os dados vindos do array precisam ser exibidos; o seu uso é necessário pois precisamos decodificar os dados, uma vez que eles vêm codificados.

Não havendo erros, então nós inserimos os dados nos respectivos campos do formulário, poupando o usuário de ter que digitar essas informações.

Nosso código ainda não está 1005 concluído, é preciso chamar a execução do método getEndereco quando o usuário clicar no botão "Pesquisar". Para isso, volte ao arquivo form.html e logo após a linha

<script src="localizacao_do_arquivo_com_o_codigo_js" type="text/javascript"></script>


E coloque o código abaixo:


<script type="text/javascript">
    $(document).ready(function(){
            $("#getEndereco").click(function(){
                getEndereco($("#cep").val());
            }); 
         });
</script>


Você pode criar vários tipos de validação dentro do evento click do botão pesquisar, mas como esse não é o foco do tutorial, deixarei que sua criatividade o leve a fazer essas validações.

Agora que seu código está pronto, certifique-se de que todos os arquivos estejam salvos, se não estiverem, salve-os e vá até o navegador (browser) e teste o seu código.

Vou deixar aqui algumas dicas de validação que você poderá utilizar na hora de validar os dados do cep enviados pelo usuário.

- Verifique se o cep possui 8 caracteres
- Verifique se todos os caracteres são numéricos
- Não deixe que o usuário digite o traço, somente números

Bom pessoal, espero que tenham gostado! Deixem seus comentários se tiverem dúvidas ou sugestões.

ASSUNTOS RELACIONADOSjquerycependereçoweb servicejlamim

 
Relacionados
Ranking de Smartphones

Confira os últimos testes de smartphones que nossa equipe realizou.

Destaques

TOPO