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.

Por Programação Pular para comentários
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. 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".


    
        Localização de endereço através do CEP usando jQuery e PHP
        
        
	        
    
    
        Cep: 

Cidade:
Estado:


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


E coloque o código abaixo:



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.

Compartilhe com seus amigos:
Jonathan Lamim
Jonathan Lamim Empreendedor digital, ex-programador (decidi abandonar a carreira após 12 anos), especialista em marketing de conteúdo e agora atuando exclusivamente com Marketing Digital, em projetos de Marketing de Conteúdo, produção de conteúdo para internet, além de escrever ebooks e criar cursos ligados ao marketing digital de um modo geral.
FACEBOOK // TWITTER: @jonathanlamimkt
Quer conversar com o(a) Jonathan, comente:
Carregar comentários
Últimas notícias de Programação
  • Google usa Mulher-Maravilha para ajudar meninas a programar

    Google usa Mulher-Maravilha para ajudar meninas a programar

    Meninas ganham um incentivo extra na hora de aprender a programar, a Mulher-Maravilha.

  • Criando um cadastro de usuário em Java

    Criando um cadastro de usuário em Java

    O objetivo deste artigo é desenvolver uma aplicação em JSE (Java Standard Edition) de inserção de dados utilizando alguns padrões de projeto.

  • Quer aprender PHP? Saiba mais

    Quer aprender PHP? Saiba mais

    Chegou o tão aguardado curso online de PHP do Oficina da Net. Você não pode perder. PHP é uma das linguagens mais usadas no mundo. Os conteúdos que vou mostrar no curso, são exatamente o que você precisa saber para iniciar sua carreira como programador.

  • Formulário de contato em php

    Formulário de contato em php

    Guia do PHP: Aprenda a fazer um formulário em PHP que envia via SMTP autenticado o e-mail para um destinatário.

  • Como fazer um GIF?

    Como fazer um GIF?

    Aprenda a criar um GIF animado de vídeos. Descubra como criar os GIFs, imagens animadas que você vê em na internet.

  • O que priorizar na hora de escolher o hosting para seu site?

    O que priorizar na hora de escolher o hosting para seu site?

    Com o crescimento das ofertas na web, saiba o que você deve levar em consideração na hora de escolher a melhor empresa de hosting para seu empreendimento

  • O que preciso fazer para criar um aplicativo?

    O que preciso fazer para criar um aplicativo?

    Temos visto que desenvolver aplicativos que visam o mercado mobile pode ser mais que uma alternativa rentável, pode colocá-lo no topo, deixá-lo rico. Mas nem tudo são flores, e o aspirante a desenvolvedor de app precisa seguir algumas regras.

  • WEBINAR 3.9

    WEBINAR 3.9

    Venha para o Maker e descubra como tornar o seu negócio mais competitivo.