Para quesito de organização, resolvi separar o meu código em 3 partes, são elas:
1º - Html (View)
2º - JQuery (Model)
3º - PHP (Controller)
"Quase" um conceito de MVC....rsrs
Para o bom funcionamento deste recurso iremos utilizar o web service República Virtual que disponibiliza o banco de dados de endereços...
Então, mãos na massa. Vamos começar com o nosso Html, para isso precisaremos de um campo para entrar com o CEP e os demais campos que receberão o endereço encontrado:
index.html
CEP: <input type="number" maxlength="8" class="form-control" name="cep" id="cep" required="" onkeyup="BuscaCep(this.value)"><br>
Logradouro: <input disabled="" type="text" class="form-control" name="logradouro" id="logradouro" required=""><br>
Nº: <input type="text" class="form-control" id="numero" name="numero" required=""><br>
Bairro: <input type="text" disabled="" class="form-control" name="bairro" id="bairro" required=""><br>
Cidade: <input disabled="" type="text" class="form-control" name="cidade" id="cidade" required=""><br>
UF: <input type="text" class="form-control" id="uf" name="uf" required="" disabled=""><br>
O nosso arquivo html acima possui apenas os campos que receberão os dados, mas para isso existe a função BuscaCep que está sendo chamada pelo "onkeyup" do campo CEP.
Observe que os outros campos (exceto "numero") encontram-se com a propriedade disabled, isto porque na nossa função tratamos para que o usuário só precise entrar com o seu endereço se o seu cep não for localizado.
Vamos ver como é feita a execução desta função em nosso arquivo JS:
funcoes.js
function BuscaCep(cep) {
if (cep.length >= 8) {
$.ajax({
url: 'cep.php', /* URL que será chamada */
type: 'POST', /* Tipo da requisição */
data: 'cep=' + $('#cep').val(), /* dado que será enviado via POST */
dataType: 'json', /* Tipo de transmissão */
success: function (data) {
if (data.sucesso === '1') {
$('#logradouro').val(data.rua);
$('#bairro').val(data.bairro);
$('#cidade').val(data.cidade);
$('#uf').val(data.estado);
$('#numero').focus();
alertas('limpar', '', 'msg')
$('#logradouro').prop("disabled", false);
$('#bairro').prop("disabled", false);
$('#cidade').prop("disabled", false);
$('#uf').prop("disabled", false);
} else {
$('#logradouro').prop("disabled", false);
$('#bairro').prop("disabled", false);
$('#cidade').prop("disabled", false);
$('#uf').prop("disabled", false);
alert('Seu CEP não foi localizado, digite seu endereço!');
}
}
});
}
return false;
}
O nosso aquivo acima verifica a quantidade de caracteres digitado no campo cep, se for maior/igual a 8 (quantidade atual de números no cep), o AJAX é acionado. Assim passando o valor digitado no método POST para o nosso arquivo PHP.
Além disso com o retorno enviado do nosso arquivo php, preenchemos os valores nos devidos campos html, e se por algum motivo o cep não for localizado, habilitamos os campos para que o usuário o informe manualmente.
Vamos ver agora o nosso php, que executará a consulta no web service.
cep.php
<?php
$cep = $_POST['cep'];
$reg = simplexml_load_file("http://cep.republicavirtual.com.br/web_cep.php?formato=xml&cep=" . $cep);
$dados['sucesso'] = (string) $reg->resultado;
$dados['rua'] = (string) $reg->tipo_logradouro . ' ' . $reg->logradouro;
$dados['bairro'] = (string) $reg->bairro;
$dados['cidade'] = (string) $reg->cidade;
$dados['estado'] = (string) $reg->uf;
echo json_encode($dados);
?>
Então, o nosso php recebe o valor cep via post (digitado no nosso html e enviado pelo nosso Js), passamos o valor para o web service utilizado (República Virtual) e em seguida preenchemos as nossas variáveis e retornamos um Json para a nossa função JS que fará o restante do trabalho...
É isso pessoal, espero que gostem e que consigam implementar esta prática nos seus projetos...
