| |
Web Service CEP - Autocompletar endereços Neste tutorial estaremos explicando como utilizar nossa base de dados para criar formulários que autocompletam a partir da informação do CEP.
As linguagens utilizadas foram HTML, Javascript e PHP, o tutorial será bem detalhado para ajudar a programadores ASP.
Vamos então ao tutorial.
Crie um arquivo chamado webservicecep.html com a seguinte tabela:
| CODE | <table align="center">
<tr>
<td>CEP: </td>
<td><input name="cep" type="text" id="cep" maxlength="9"> <a href="javascript: funcaowebservicecep();">completar endereço</a></td>
</tr>
<tr>
<td>Logradouro: </td>
<td><input id="rua" name="rua" type="text"></td>
</tr>
<tr>
<td>Numero: </td>
<td><input id="numero" name="numero" type="text"></td>
</tr>
<tr>
<td>Complemento: </td>
<td><input id="complemento" name="complemento" type="text"></td>
</tr>
<tr>
<td>Bairro: </td>
<td><input id="bairro" name="bairro" type="text"></td>
</tr>
<tr>
<td>Cidade: </td>
<td><input id="cidade" name="cidade" type="text"></td>
</tr>
<tr>
<td>UF: </td>
<td><input id="uf" name="uf" type="text" size="4"></td>
</tr>
</table> |
Observe que é um formulário simples, com um pequeno detalhe; um link chamado "completar endereço" que chama a funcão javascript.
O próximo arquivo é o javascript, consulta.js
| CODE | function getHTTPObject() {
var xmlhttp;
/*@cc_on
@if (@_jscript_version >= 5)
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
@else
xmlhttp = false;
@end @*/
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}
var http = getHTTPObject();
function funcaowebservicecep()
{
http.open("GET", 'buscarendereco.php?cep='+document.getElementById("cep").value, true);
http.onreadystatechange = handleHttpResponse;
http.send(null);
var arr; //array com os dados retornados
function handleHttpResponse()
{
if (http.readyState == 4)
{
var response = http.responseText;
eval("var arr = "+response); //cria objeto com o resultado
document.getElementById("rua").value = arr.rua;
document.getElementById("bairro").value = arr.bairro;
document.getElementById("cidade").value = arr.cidade;
document.getElementById("uf").value = arr.uf;
}
}
} |
Não esqueça que colocar a chamada para consulta.js no arquivo webservicecep.html.
| CODE | | <script type="text/javascript" src="consulta.js"></script> |
O terceiro e último arquivo que precisaremos será em PHP, buscarendereco.php, responsável por coletar os dados a partir do CEP na nossa base de dados.
| CODE | $consulta = 'http://viavirtual.com.br/webservicecep.php?cep='.$_GET['cep'];
$consulta = file($consulta);
$consulta = explode('||',$consulta[0]);
// Caso seja necessário poderá salvar os dados em SESSION
$rua=utf8_encode($consulta[0]);
$bairro=utf8_encode($consulta[1]);
$cidade=utf8_encode($consulta[2]);
$uf=$consulta[4];
?>{"rua":"<? echo $rua; ?>","bairro":"<? echo $bairro; ?>","cidade":"<? echo $cidade; ?>","uf":"<? echo $uf; ?>"} |
Pronto, estará funcionando se os três arquivos estiverem salvos no mesmo diretório em um servidor Web com suporte a PHP.
Vamos ao ponto mais importante que é lógica, o entendimento permitirá que programadores façam ajustes necessários a suas aplicações.
O internauta acessa o formulário e digita o CEP, ao clicar em "completar endereço" a função javascript funcaowebservicecep é acionada abrindo o arquivo buscarendereco.php com variável CEP.
| CODE | | http.open("GET", 'buscarendereco.php?cep='+document.getElementById("cep").value, true); |
O javascript com a resposta do arquivo buscarendereco.php (nesta hora o arquivo php já está com a informação sobre o endereço do CEP) transforma os dados em objeto separando o resultado e autocompletando o endereço.
| CODE | var response = http.responseText;
eval("var arr = "+response); //cria objeto com o resultado
document.getElementById("rua").value = arr.rua;
document.getElementById("bairro").value = arr.bairro;
document.getElementById("cidade").value = arr.cidade;
document.getElementById("uf").value = arr.uf; |
Dica Poderá criar no arquivo buscarendereco.php SESSION's para que possa usar os dados em outras ocasiões no site.
 Demostração do Web Service CEP
Download dos arquivos
Se for utilizar o Web Service não esqueça de assinar o blog deixando seu e-mail, será por aqui que estaremos fazendo novas considerações e comentários.
Espero ter contribuído, um forte abraço a todos, Evanil.
Postado: Domingo, 5 de Setembro de 2007
Comentários
 |
| |
|
Shirley disse: |
|
| |
Quarta-feira, 17 de Novembro de 2007 |
|
 |
| |
Olá, o único dado que retorna é a UF do CEP correspondente, os outros dados não, tem algum bug no script!?
Obrigada
|
|
| |
|
Evanil disse: |
|
| |
Sexta-feira, 19 de Novembro de 2007 |
|
|
| |
Havia um bug no script, problema resolvido! |
|
| |
|
Shirley Oliveira disse: |
|
| |
Sabado, 20 de Novembro de 2007 |
|
|
| |
Obrigada |
|
| |
|
Leonardo disse: |
|
| |
Terça-feira, 23 de Novembro de 2007 |
|
|
| |
Excelente! Funciona muito bem. Parabéns!!! |
|
| |
|
Evanil disse: |
|
| |
Terça-feira, 23 de Novembro de 2007 |
|
|
| |
Obrigado pelo comentário! |
|
| |
|
Alan Solon disse: |
|
| |
Sabado, 1 de de 2007 |
|
|
| |
Otima aplicação muito util e bem pratica. Vlw mesmo pela ajuda. |
|
| |
|
Alison disse: |
|
| |
Sexta-feira, 14 de de 2007 |
|
|
| |
como faço pra ele busca os dados na minha base mysql? |
|
| |
|
Evanil disse: |
|
| |
Sabado, 15 de de 2007 |
|
|
| |
Exigirá que tenha a base de dados com os CEp's, é uma base bem ampla com mais de 100MB em dados |
|
| |
|
Alison disse: |
|
| |
Sabado, 15 de de 2007 |
|
|
| |
eu ja tenho a base se alguem precisar eu posso passar de alguma forma mais eu preciso do seu scrip adaptado para busca na minha base musql de cep teria como??????????? |
|
| |
|
Evanil disse: |
|
| |
Sabado, 15 de de 2007 |
|
|
| |
O script vai depender de como sua base de dados está organizada.
Desejamos boa sorte! |
|
| |
|
Wdc disse: |
|
| |
Terça-feira, 23 de Outubro de 2008 |
|
|
| |
Muito util mesmo! |
|
|
| |
|
|
|
