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

44 4 comentário(s) Jonathan Lamim (@jlamim)

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.

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.

Recomendamos para você
 

Comentários
Compartilhe com seus amigos:
Novidades
tópicos relacionados
Compartilhe com seus amigos:
últimos reviews
  • 8,6
    Review Moto X - Segunda geração
    O aparelho da Motorola é a prova “viva” que o que está ótimo pode melhorar ainda mais.
  • 8,1
    Review Zenfone 5
    Tela de 5 polegadas, câmera de foto e vídeo superiores aos concorrentes, boa usabilidade e preço baixo. A Asus acertou n...
  • 6,4
    Review Nokia Lumia 635
    Testamos hoje o Smartphone Nokia Lumia 635. Confira abaixo o que achamos.



TOPO