Carregando dados no Select com jQuery e Ajax

Adriano Meira — Thu, 19 Nov 2009 11:12:31 +0000

Olá pessoal como diria o bom e velho Exterminador “i’ll be back!”, ao poucos vou terminando de ajustas as coisas da casa e postar coisas novas, então vamos lá. Sabe quando você precisa de carregar algum(s) dados em um campo de selecet do seu documento e acha aqueles códigos enormes de ajax?

Pois seus problemas acabaram! Trago para vocês um carregamento simples com jQuery e PHP, esqueça aqueles códigos enormes e problemas de acentuação com algumas técnicas de jQuery e PHP seus problemas já eram.

Vamos logo ao que interessa, para nossa “receita” de hoje vamos precisar de:

Ingredientes:
1-Biblioteca do jQuery.
2-Arquivos tipo .php.
2-Selects, um onde terá os dados por exemplo do estado e outro que será carregado as cidades.
1-um banco de dados a gosto.

Modo de preparo
Abra um novo documento de PHP e dê o nome que quiser, nele inclua a biblioteca jQuery com a seguinte tag:

Lembre-se de deixar tudo na mesma panela, digo pasta, em seguida vamos ao select, crie dois selects onde um será o que contem os dados e o outro o que receberá logo teremos:

E outro que recebrá os dados passados pela função do de cima:

Lembre-se que estes selects estão abaixo ta tag do seu documento,a gora acrescente cuidadosamente o seguinte código, não misture muito para não perder o gosto.

Explicando o código:

Criamos a função chamada de “getValor” que recebe alguma coisa “valor” daí mudamos o html do que bvei receber os dados para carregando, em seguida usamos o setTimeout do javascript para dar um “dele” um tempinho de 2 segundos para que fique tudo pronto e carregado depois, em seguida usamos a função load do jQuery que substitui o velho Ajax gigantesco, por padrão ele recebe:

$("#ondeVaiCarregar").load.("pagina_carregada.php #seletor", {parametros:valor})

Isso significaria:

pagina_carregada.php?parametros=valor

E será exibido tudo dentro do seu seletor e apenas o que foi determinado no #seletor, magia? Macumba? Não é jQuery.

Continuando, vamos para a página onde irá buscar do banco o valor que passamos, nesta página eu pego o valor passado por POST e faço uma busca no banc de dados, montando os campos do select um em baixo do outro veja:

//Conecta ao Banco
$conexao = mysql_connect("localhost", "usuario", "senha")
or die ('Não foi possivel conectar ao banco porque; ' . mysql_error());
$db = mysql_select_db("banco") or die ("Banco de Dados Inexistente");
$id = $_POST["paramentros"];
$sql = "SELECT * FROM seuBanco WHERE idTabela = '$id'";
$totalBusca = mysql_query($sql);

while( $linha = mysql_fetch_assoc($totalBusca) ){
     echo "\n";
}

Para aqueles que conhecem de PHP nada de novo né? Bom uma rápida passadinha,nas quatro primeira instruções conexão ao banco de dados básicas, as próximas três isntruções eu recupero o valor passado via POST, monto a consulta e depois a executo, em seguida crio um “loop” onde vou imprimindo as opções do SELECT que vai recebe-las. Agora uma dica legal, para não ter problemas com acentuaçào utilize a função htmlentities(); do PHP, ela converte os caracters UTF e ISO, para maiores detalhes consulte o manual do PHP aqui.

Agora basta testar, e “voilà” aqui está seu combo trazendo as cosas certinhas, macumba? Magia ? Não é jQuery facilitando sua dúvida, caso queira aqui está um teste sem consulta no banco, baixe e brinque bastante, dúvidas estarei aqui.

Até mais pessoal!

Blog do Adriano Meira » php

Carregando dados no Select com jQuery e Ajax