Localização de endereço através do CEP usando jQuery
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>
<script src="localizacao_do_arquivo_com_o_codigo_js" type="text/javascript<script src="localizacao_do_arquivo_jquery" type="text/javascript">
<"></script>
</head>
<body>
" value="" id="cep"/><input type="button" id="getEndereco" value="Pesquisar"/><br/>
<p id="loadingCep"></p>
CidCep: <input type="text" maxlength="
8ade: <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"
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) != ""){
ml('Pesquisando...');
$.getScript("http:$("#loadingCep").h
t//cep.republicavirtual.com.br/web_cep.php?formato=javascript&cep="+cep, function(){ if (resultadoCEP["resultado"] != 0) {
oCEP["cidade"]));
$("#estado").val(unescape(resulta$("#cidade").val(unescape(resulta
ddoCEP["uf"]));
}else{
ml(unescape(resultadoCEP["resultado_txt"]));
}
$("#loadingCep").h
t});
}
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',
rto%20Alegre',
'bairro' : 'P'cidade' : 'P
oasso%20D%27Areia',
: 'Avenida',
'logradouro' : ''tipo_logradouro'
Assis%20Brasil',
'resultado' : '1',
0completo'
}'resultado_txt' : 'sucesso%20-%20cep%
2Os dados retornados na chave "resultado" e "resultado_txt" podem variar. A seguir veja quais podem ser essas variações:
var resultadoCEP = { 'uf' : 'ES',
rata%EDzes',
'bairro' : '''cidade' : 'M
a,
'tipo_logradouro' : '',
ado' : '2',
'result'logradouro' : '',
'resul
tado_txt' : 'sucesso%20-%20cep%20%FAnico'
}var resultadoCEP = { 'uf' : '',
',
'bairro' : 'cidade' :
''',
_logradouro' : '',
'log'tip
oradouro' : '',
',
'resultado_txt''resultado' : '
0 : '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.
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(){
k(function(){
getEndereco($("#cep"$("#getEndereco").cli
c).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
Nenhum comentário