Uma necessidade comum para quem trabalha com cadastros é padronizar o endereço informado pelo visitante. Algo que se oferece para facilitar o processo de cadastro é preencher o endereço com base no CEP informado.
Apesar dos Correios não terem um webservice para consulta de CEP, existem vários webservices gratuitos que permitem fazer esta pesquisa. Neste artigo vamos utilizar o webservice gratuito do site "República Virtual"
Neste exemplo você vai aprender a fazer uma consulta assíncrona usando JavaScript e AJAX.
Veja o código do nosso formulário:
<form name="frmCEP"> CEP: <input type="text" name="CEP" maxlength="8" onKeyPress="return isNumberKey(event)"> <input type="button" name="btnCEP" value="Pesquisar CEP" onclick="PesquisarCEP(document.frmCEP.CEP.value);"> </form> <div id="resultado_cep"></div>
O formulário é bem simples, ele tem o nome de "frmCEP" e possui um campo de texto e um botão. Ao consumir o webservice, será preenchida uma "div" abaixo do formulário com o resultado da pesquisa.
No código do formulário, vemos que para o campo de texto foi adicionado um evento onKeyPress, neste evento será chamada uma função com o nome de isNumberKey. Como o evento "keypress" é chamado ao digitar um caractere dentro do campo, esta função sempre será executada durante a digitação, o objetivo desta função é permitir apenas a digitação de números.
function isNumberKey(evt) { var charCode = (evt.which) ? evt.which : event.keyCode if (charCode > 31 && (charCode < 48 || charCode > 57)) return false; return true; }
O botão do formulário tem um evento onclick onde ele chama uma funçao chamada PesquisarCEP(), esta função recebe como um parâmetro o CEP digitado no campo de texto. A forma de fazer referência ao conteúdo do campo é document.nome_do_formulario.nome_do_campo.value.
Para fazer a comunicação assíncrona, ou seja, sem recarregar a página, vamos precisar importar a biblioteca do Jquery. Para isso, será necessário adicionar no HTML a chamada para o seguinte script:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
A chamada assíncrona terá o seguinte formato:
function PesquisarCEP(cep_informado){ var resultado; $.ajax({ type: "GET", url: "http://cep.republicavirtual.com.br/web_cep.php?cep=" + cep_informado + "&formato=json", dataType:"json", error: function() { alert('Houve um problema de comunicacao'); } }).done(function(dados) { //Tratando os dados });}
No exemplo acima o parâmetro "type" define qual a forma de comunicação (GET ou POST), o parâmetro "URL" guarda o endereço que vamnos consumir, o "datatype" é o formato da comunicação, no caso vamos trabalhar com JSON, o "error" vai exibir um alerta se a comunicação não for possível.
O tratamento do resultado no caso da comunicação ser efetuada com sucesso será feito pelo "done", como o retorno será em JSON, vamos ler o resultado e concatenar numa variável, o conteúdo será impresso numa div chamada "resultado_cep"
function PesquisarCEP(cep_informado){ var resultado; $.ajax({ type: "GET", url: "http://cep.republicavirtual.com.br/web_cep.php?cep=" + cep_informado + "&formato=json", dataType:"json", error: function() { alert('Houve um problema de comunicacao'); } }).done(function(dados) { var resultado = ""; resultado += "CEP informado:" + cep_informado + "<br>"; resultado += "Resultado:" + dados.resultado_txt + "<br>"; resultado += "Estado:" + dados.uf + "<br>"; resultado += "Cidade:" + dados.cidade + "<br>"; resultado += "Bairro:" + dados.bairro + "<br>"; resultado += "Tipo Logradouro:" + dados.tipo_logradouro + "<br>"; resultado += "Logradouro:" + dados.logradouro + "<br>"; document.getElementById("resultado_cep").innerHTML = resultado; }); }
O exemplo completo pode ser visto neste link:
Jean Bilhalva
18/12/2020 15:31