Como fazer uma consulta ao banco de dados sem atualizar a página?

Olá!

Hoje, vamos ver como fazer uma consulta ao banco de dados sem precisar atualizar a página! Na verdade, apesar do nome do post, o mesmo recurso serve para deletar, alterar ou excluir registros do banco sem atualizar, ok.

Faremos uso de jQuery com PHP!

Vamos lá!

Primeiro, vamos importar o jQuery para o seu site. Você pode baixar o script e adicionar ao seu site ou indicá-lo, diretamente na internet. Seja como for, adicione-o!

< script type="text/javascript" src="/jquery/jquery.js">< /script >

(não usei as tags direito - < script ... >< / script > - porque o blogger não deixa, ok, mas você, escreva certo - corrija os espaços a mais que eu dei!)

Para explicar este uso, vamos fazer um clássico sistema de buscar o endereço (RUA, BAIRRO, CIDADE e UF) através do CEP e preencher os campos de um formulário com os dados.

Após isso, adicione, dentro da HEAD, no HTML a função jQuery que chamará (executará) o arquivo que pega as informações no banco de dados pra nós, SEM atualizar a página:

$(document).ready(function(){
                //AQUI VOCÊ COLOCA O ID DO BOTÃO "Buscar CEP", DO SEU FORMULÁRIO
                $("#encontrar_cep").click(function(){
                    //CRIA UMA VARIÁVEL (cep_procurado) COM O VALOR QUE ESTIVER
                    //NO CAMPO COM ID "cep_circulacao"
                    var cep_procurado = $("#cep_circulacao").val();
                    $.ajax({ 
                        //CAMINHO DO ARQUIVO QUE FAZ A BUSCA NO BANCO DE DADOS
                        url: "/sistema/buscarCepCirculacao.php",
                        //TIPO DE DADOS QUE SERÃO RETORNADOS
                        dataType: 'html',
                        //VARIÁVEL "cep" RECEBE "cep_procurado" - VARIÁVEL QUE CRIAMOS
                        //E QUE CARREGA O CEP DIGITADO
                        data: {cep:cep_procurado},
                        //TIPO DE PASSAGEM DE DADOS - MÉTODO
                        type: "POST",
                        //O QUE ACONTECE QUANDO CLICAR NO BOTÃO
                        //ENQUANTO O ARQUIVO BUSCA NO BANCO DE DADOS
                        beforeSend: function (){
                            //AQUI É UM OBJETO COM UM gif ANIMADO, DO TIPO "carregando",
                            //SABE
                            //BOLINHAS, FLECHINAS... ENFIM, VOCÊ DECIDE...
                            //BASTA POSICIONAR O OBJETO (com css) E DAR O ID DE "carregando"
                            $('#carregando').show();
                            //NESTE CASO, ESTOU COLOCANDO NO CAMPO QUE TEM
                            //O ID "endereco_circulacao", NO MEU FORMULÁRIO,
                            //A MENSAGEM "consultado sistema..."
                            //LEMBRE-SE QUE ISSO SÓ ACONTECERÁ ENQUANTO O ARQUIVO
                            //AGUARDA O RETORNO DO BANCO DE DADOS...
                            $("#endereco_circulacao").val("consultado sistema...");
                        },
                        //SE DER TUDO CERTO...
                        success: function(data){
                            //A DIV ANIMADA DESAPARECE
                            $('#carregando').hide();
                            //PRECISAMOS DE UM LUGAR PRA EXECUTAR O CÓDIGO DE
                            //PREENCHIMENTO QUE VOCÊ VERÁ A SEGUIR, ENTÃO,
                            //COLOQUEI O CAMPO DO ENDEREÇO (ID "endereco_circulacao")
                            $("#endereco_circulacao").html(data);
                        },
                        //CASO DÊ ALGO ERRADO - ERRADO DE "NÃO EXECUTAR",
                        //OU NÃO RODAR, NÃO ERRADO QUE NÃO ACHOU NO BANCO...
                        error: function(data){
                            $('#carregando').html(data);
                        }
                    });
                });
            });

Ótimo! "Mamão com açúcar"!

Agora, é só criarmos aquele arquivo que faz a busca no banco (que declaramos na função acima, lembra: buscarCepCirculacao.php

Vamos então a ele!



Crie um arquivo com o nome informado e, dentro das tags php (< ?php ......... ?> use este código:

//CUIDA DOS ACENTOS...
header("Content-Type: text/html; charset=ISO-8859-1", true);

//CONEXÃO AO BANCO DE DADOS (PDO)
$host = 'localhost';
$database = 'base_de_dados';
$user = 'usuario';
$password = 'senha';

@define('HOST', $host);
@define('DB', $database);
@define('USER', $user);
@define('PASS', $password);

$conexao = 'mysql:host=' . HOST . ';dbname=' . DB;

try {
    $conecta = new PDO($conexao, USER, PASS);
    $conecta->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    //echo 'Conectou!';
} catch (PDOException $error_conecta) {
    echo htmlentities('Erro ao se conectar com database ' . $error_conecta->getMessage());
}

//PEGO O CEP E RETIRO O "-", SE EXISTIR E ATRIBUO O VALOR NA 
//VARIÁVEL "$cep"
$cep = str_replace("-", "", $_POST['cep']);

//BUSCA A RUA
$sql = "SELECT * FROM logradouros WHERE no_logradouro_cep = " . $cep;
if ($cep == '') {
    echo 'Digite o CEP';
    exit;
}
try {
    $query = $conecta->prepare($sql);
    $query->execute();
    $resultado = $query->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $erro) {
    echo $erro->getMessage();
    echo '
';
    echo $sql;
}
foreach ($resultado as $res) {
    $rua = $res['ds_logradouro_nome'];
    $bairro = $res['cd_bairro'];
}

//BUSCA O BAIRRO
$sql = "SELECT * FROM bairros WHERE cd_bairro = " . $bairro;
try {
    $query = $conecta->prepare($sql);
    $query->execute();
    $resultado = $query->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $erro) {
    echo $erro->getMessage();
    echo '
';
    echo $sql;
}
foreach ($resultado as $res) {
    $bairro = $res['ds_bairro_nome'];
    $cidade = $res['cd_cidade'];
}

//BUSCA A CIDADE
$sql = "SELECT * FROM cidades WHERE cd_cidade = " . $cidade;
try {
    $query = $conecta->prepare($sql);
    $query->execute();
    $resultado = $query->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $erro) {
    echo $erro->getMessage();
    echo '
';
    echo $sql;
}
foreach ($resultado as $res) {
    $cidade = $res['ds_cidade_nome'];
    $uf = $res['cd_uf'];
}

//BUSCA O UF
$sql = "SELECT * FROM uf WHERE cd_uf = " . $uf;
try {
    $query = $conecta->prepare($sql);
    $query->execute();
    $resultado = $query->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $erro) {
    echo $erro->getMessage();
    echo '< br />';
    echo $sql;
}
foreach ($resultado as $res) {
    $uf = $res['ds_uf_sigla'];
}

//SE ENCONTRAR A RUA - SE $rua FOR DIFERENTE DE VAZIO...
if($rua != ''){
    //COLOCA OS DADOS NAS CAIXAS, COM JAVASCRIPT
    echo '
    < script >
        document.cadastro.endereco_circulacao.value = "' . maiu($rua) . '";
        document.cadastro.bairro_circulacao.value = "' . maiu($bairro) . '";
        document.cadastro.cidade_circulacao.value = "' . maiu($cidade) . '";
        document.cadastro.uf_circulacao.value = "' . maiu($uf) . '";
    < /script >';
} else { //SE NÃO ENCONTRAR A RUA
    $mensagem = utf8_decode('CEP não encontrado!');
    echo '
    < script >
        //EXIBE UM ALERTA E ZERA OS CAMPOS
        alert("' . $mensagem . '");
        document.cadastro.endereco_circulacao.value = "' . $mensagem . '";
        document.cadastro.bairro_circulacao.value = "";
        document.cadastro.cidade_circulacao.value = "";
        document.cadastro.uf_circulacao.value = "";
    < /script >';
}

Nota¹: O que estiver em rosa, está com ESPAÇOS (" ") sobrando, arrume-os...
Nota²: É OBVIO que cada um deve alterar o código a sua necessidade, ok?!

Ah, lá no seu Formulário, pra criar o botão que busca o cep, faça algo assim:

< input type="button" id="encontrar_cep" class="btn" value="Buscar" style="margin-left: 135px;" />

Sim, é SÓ isso!

Deus abençoe!