Blog do Adriano Meira - Uma ajudinha para desenvolvedores e web designers. Uma ajudinha para desenvolvedores e web designers.

Carregando e pesquisando dados com jQuery em select e div – GET e POST

Olá pessoal depois de ver que muita gente se interessou pelo carregamento de dados em um select usando o método “load” do jQuery (veja aqui o post sobre) que tal usar uma função mais refinadas e mais segura, vamos usar o método POST e GET, mas qual a diferença?

No caso do “LOAD” ele apenas lê uma página e retorna o que ela imprimiu, não há muita segurança nisso,então temos um”nível 2″ em carregamento de jQuery, com mais segurança e tão simples de usar como se estivesse passando dados para uma página normal em PHP por exemplo.

Ok qual a vantagem de se usar o método “POST” e “GET”? Uma das grandes vantagens é que o tempo de resposta é real, note que no artigo anterior usamos um “setTimeout” para dar um “delay” na respota, já nestas funções eles tem um retorno de acordo com o tempo de busca, na íntegra a função “POST” e “GET” tem:

$.post( url, [ dados ], [ sucesso(data, textStatus, XMLHttpRequest) ], [ dataType ] )
$.get( url, [ dados ], [ sucesso(data, textStatus, XMLHttpRequest) ], [ dataType ] )

Isso quer dizer então que ao chamar a função (“POST” ou “GET”) passo uma URL que vai receber os dados, seria no caso o parâmetro que se passa via GET ou POST, com exemplo “index.php?id=1” logo o dado seria “id: 1” e por fim o resultado ao passar os dados.

Então na prática vamos começar com o carregamento de selects (combobox)

Chame o jQuery na sua página:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

Agora vamos criar a função que vai pesquisar os dados na página, veja:

function pegaValor(valor){
	$('#encontrado').html("Pesquisando...");
	$.post("pegaValor.php", { id: valor },
		function(data){
		$('#recebendo').html(data);
	});
}

Agora vamos aos selects, o primeiro que vai passar os dados e o segundo que vai receber os dados da função:

Selecione:
<select id="selecione" name="selecione" onChange="pegaValor(this.value)">
    <option>Selecione algo</option>
    <option value="1">Dado Um</option>
    <option value="2">Dado Dois</option>
    <option value="3">Dado Tr&ecirc;s</option>
</select>
Depois o que vai receber os dados
<select id="recebendo">
    <option value="">Escolha algo antes</option>
</select>
E por fim você deve criar uma página que vai receber os dados, pode fazer bem como quiser, consulta em banco, if, switches e etc… mas não se esqueça de receber o “GET” ou o “POST”, no meu exemplo abaixo (bem simples) eu recebo o “POST” e mando imprimir o HTML do option (que a função “pegaValor” exibe o resultado no id “recebendo“), veja exemplo do PHP:
$id = $_POST["id"];
if( $id == "Selecione algo"){
	/* Se o valor tiver vazio retona vazio */
	echo "<option>Selecione algo</option>";
}else{
	/* Se tiver o valor então faz checagem no 
	   banco ou outra como abaixo */
	switch($id){
		case 1;
			echo "<option>Voc&ecirc; selecionou o um</option>";
			break;
		case 2;
			echo "<option>Voc&ecirc; selecionou o dois</option>";
			break;
		case 3;
			echo "<option>Voc&ecirc; selecionou o tr&ecirc;s</option>";
			break;
	}
}

Prontinho, agora vamos brincar um pouco mais vamos fazer uma função para que o cara digite algo e retorne com uma busca pela letra que digitou ou palavra, para começar a função abaixo para pesquisar:

function pesquisaValor(valor){
	$('#encontrado').hide();
	$.post("pesquisaValor.php", { id: valor },
		function(data){
			if(data == ""){
				$('#encontrado').hide();
			} else {
				$('#encontrado').show();
				$('#encontrado').html(data);
			}
	});
}

E agora o HTML onde o cara digita a palavra e a DIV onde vai receber o resultado:

<small>Dica: Procure pelas letras A, B, C e teste</small><br />
Digete um termo: <input type="text" id="pesquisar" class="pesquisar" onKeyUp="pesquisaValor(this.value)" />
<div id="encontrado" style="display:none"></div>
E por fim vamos ao PHP que recebe os dados, como disse, você pode utilizar como quiser basta receber o “POST” ou o “GET”, veja:
$id = $_POST["id"];
if( $id == "Selecione algo"){
	/* Se o valor tiver vazio retona vazio */
	echo "Nada encontrado";
}else{
	/* Se tiver o valor então faz checagem no 
	   banco ou outra como abaixo */
	switch($id){
		case "a";
			echo "Abacate<br />";
			break;
		case "b";
			echo "Banana<br/>Biribiri<br /.;";
			break;
		case "c";
			echo "Caqui<br />Caju<br />carambola<br />";
			break;
		case "teste";
			echo "opa viu como funciona até chegar na &uacute;ltima letra 'e'
				  ele não apresentou o resultado.";
			break;
	}
}

Agora você pode utilizar esses modelos e dicas para criar coisas mais sofisticadas como formulários sem refresh, carregamento de conteúdo vindo do banco também sem refresh , buscar dados em uma página externa, retornar se uma condição é verdadeira ou falsa, caso desejem postem ai algumas dessas funções que queiram que eu detalhe e de exemplos, fiquem a vontade.




Adriano Meira é o criador do blog, trabalha desde 2012 como Webdesigner e hoje formado em design gráfico trabalho para a Brasil na Web e como free-lancer nas áreas de Design para Web (Webdesigner), Design Gráfico, Impressos e criação de marcas.

Comente este artigo você também!

Comentários (19)

  • Francisco Josué Paiva Leal disse:

    Otimo POST só uma duvida na função:

    function pegaValor(valor){
    $(‘#encontrado’).html(“Pesquisando…”);
    $.post(“pegaValor.php”, { id: valor },
    function(data){
    $(‘#recebendo’).html(data);
    });
    }

    tem como eu passar a variavel {id: valor} para duas páginas

    $.post(“pegaValor.php”, { id: valor }

  • Adriano Meira disse:

    Olá Francisco

    Se entendi bem você deseja que duas páginas distintas recebam o valor da variável id, correto? Se for desta maneira tem como você no Callbeck da função $.post colocar outra função dentro, por exemplo, temos a página a-teste.php e b-teste.oho logo fazemos a requisição da primeira página consultando via id assim:

    function pegaValor(valor){
    $(‘#encontrado’).html(“Pesquisando…”);
    $.post(“pegaValor.php”, { id: valor },
    function(data){
    //Aqui é a função de resposta, caso tenha obtido resposta do id...
    if(data){
    $.post("b-teste.php", {id: valor},
    function(data){
    $('#recebendo').html(data);
    //Ou se desejar mais uma faça um novo if
    })
    }
    });
    }

    Desta forma você pode fazer if´s e dentro deles funções, no exemplo acima eu chequei se o primeiro data que passa em a-teste.php é verdadeiro, você pode checar se o valor é maior, menor ou igual a alguma coisa.

    Espero ter ajudado, se não posta ai para procurar uma forma de te ajudar velinho.

  • Francisco Josué Paiva Leal disse:

    Tenho um campo combo/listbox para “cidades” e um campo combo listbox para “bairros” e um campo combo listbox para “postos de atendimento”
    esse campo postos de atendimento vai receber um filtro que vai ter como parametros passados a cidade, tipow assim ao clicar na cidade
    o campo postos de atendimento já vai filtrar os postos para aquela cidade, na verdade eu queria passar essa variavel $cidade
    para duas páginas “bairros.php” e “postos.php” aqui vai partes do meu codigo:

    Minha tabela está mais ou menos assim

    tabela cidade:
    CODIGO
    DESCRICAO

    tabela franquias – postos:
    CODIGO
    CIDADE
    RZSOCIAL
    NOME_FANTASIA

    —————————index.php

    //aqui o javascript/jquery para listar os bairros no combo

    //Função para o bairro
    $(function(){
    $(“select[name=list_cidades]”).change(function(){
    beforeSend:$(“select[name=list_bairros]”).html(‘Aguarde…’);
    var cidade = $(“select[name=list_cidades]”).val();

    $.post(“bairros.php”, {cidade: cidade},function(pega_bairro){ //aqui era onde eu queria que fosse passado para a página postos.php também
    complete:$(“select[name=list_bairros]”).html(pega_bairro);
    })
    })
    })

    //aqui o campo no formulário listando todas as cidades

    <?php
    $pega_cidades = mysql_query("SELECT * FROM CIDADES ORDER BY DESCRICAO ASC");
    if (mysql_num_rows($pega_cidades)<= '0'){
    echo 'Não existe nenhum registro’;
    }else{
    while ($resultado_cidades = mysql_fetch_array($pega_cidades)){
    $cidade_codigo = $resultado_cidades[‘CODIGO’];
    $cidade_descricao = $resultado_cidades[‘DESCRICAO’];
    echo ”.$cidade_descricao.”;
    }
    }
    ?>

    //aqui o campo que vai receber os bairros

    ###############################################################

    —————bairros.php

    //aqui o arquivo que vai pegar os bairros no banco de dados

    <?php
    $cidade = $_POST['cidade'];
    $seleciona_bairro = mysql_query("SELECT * FROM franquia where CIDADE = {$cidade} GROUP BY BAIRRO ORDER BY BAIRRO ASC");

    if (mysql_num_rows($seleciona_bairro) <= '0'){
    echo 'Nao existe bairros para a cidade informada’;
    }else{
    //echo ‘Selecione…’;
    while ($res_bairro = mysql_fetch_array($seleciona_bairro)){
    $bairro_id = $res_bairro[‘CODIGO’];
    $bairro_descricao = $res_bairro[‘BAIRRO’];
    echo ”.$bairro_descricao.”;
    }
    }
    ?>

    —————–postos.php

    //aqui o arquivo que vai pegar os postos no banco de dados mediante a variavel passada como parametro lá do index

    <?php
    $cidade = $_POST['cidade']; //aqui o campo que eu queria que vinhesse lá do index.php

    $seleciona_posto = mysql_query("SELECT * FROM franquia where CIDADE = {$cidade} ORDER BY CODIGO");

    if (mysql_num_rows($seleciona_posto) <= '0'){
    echo 'Nao existe bairros para o parametro informado’;
    }else{
    while ($res_posto = mysql_fetch_array($seleciona_posto)){
    $posto_id = $res_posto[‘CODIGO’];
    $posto_descricao = $res_posto[‘NOME’];
    echo ”.$posto_descricao.”;
    }
    }
    ?>

  • Francisco Josué Paiva Leal disse:

    to tentando assim:

    $(function(){
    $(“select[name=list_cidades]”).change(function(){
    beforeSend:$(“select[name=list_bairros]”).html(‘Aguarde…’);
    var cidade = $(“select[name=list_cidades]”).val();

    $.post(“bairros.php”, {cidade: cidade},function(pega_bairro){
    complete:$(“select[name=list_bairros]”).html(pega_bairro);
    if(pega_bairro){
    $.post(“postos.php”, {cidade: cidade},function(pega_bairro){})
    }
    })

    })
    })

  • Francisco Josué Paiva Leal disse:

    Tenho que mandar o value de varios combos(listmenus) sem refresh com jquery para um arquivo que vai montar uma query e listar em outro combo (textbox) sem refresh (sem clicar no submit)

    Acho que isso tem que ser feito na mesma função javascript e ele pega o value no change dos respectivos combos e manda para o arquivo no final da funçaõ, não c preocupem com o arquivo que vai receber esses dados por que eu já o preparei so quero a sintaxe de como passar esses valores na mesma função no change de cada combo.

    sugestões por favor

  • Adriano Meira disse:

    Francisco, eu testei algumas coisas mas ficou meio confuso para mim, veja se está certo, você tem um select de estado, escolhido o tal é selecionado os estados e de acordo com a seleção de estado aparece também um outro select de “postos” correto? Se for assim me sinalize para eu lhe dar a solução.

  • Francisco Josué Paiva Leal disse:

    Cara consegui hoje resolver depois de muito bater cabeça o codigo ficou mais ou menos assim:

    Só queria saber c a sintaxe ta corretinha c poderia melhorar….. mais ele está fazendoo certinho.

    $(function(){
    $("select[name=list_cidades]").change(function(){
    beforeSend:$("select[name=list_bairros]").html('Aguarde...');
    beforeSend:$("select[name=list_franquias]").html('Aguarde...');
    var cidade = $("select[name=list_cidades]").val();
    $.post("bairros.php", {cidade: cidade},function(pega_bairro){
    complete:$("select[name=list_bairros]").html(pega_bairro);
    if(pega_bairro){
    $.post("postos.php", {cidade: cidade},function(pega_franquia){
    complete:$("select[name=list_franquias]").html(pega_franquia);
    if(pega_franquia){
    $("select[name=select_postos]").change(function(){
    var cidade = $("select[name=list_cidades]").val();
    var sit_postos = $("select[name=select_postos]").val();
    $.post("postos.php", {cidade: cidade, sit_postos: sit_postos},function(pega_franquia_sit){
    complete:$("select[name=list_franquias]").html(pega_franquia_sit);
    })
    })
    }
    })
    }
    })

    })
    })

    Tenho outra duvida agora completamente diferenete como fazer para habilitar um combo mediante a opção selecionada em outro, desde já agradeço.

  • Francisco Josué Paiva Leal disse:

    ihhhh cara fazendo um teste mais aprimorado no codigo anterior ele está incostante as vezes faz as vezes não faz, mais estamos quase conseguindo c vc puder analizar só para ver c a sintaxe está correta.

    Desde já agradeço.

  • Adriano Meira disse:

    Cara correndo o olho rápido vejo que ta certo, se me permitir hoje a noite em casa vou testar e debugar cada linha assim acho onde pode estr o erro, você pode esperar um pouquinho mais?!

  • Francisco Josué Paiva Leal disse:

    Na hora….

    Desde já agradeço, to precisando muito dessa função.

  • Francisco Josué Paiva Leal disse:

    Cara vou fazer o seguinte….

    Vou fazer uma video esse final de semana te explicando o meu problema inclusive te mostrando o meu formulário, ok

  • Adriano Meira disse:

    Olá Francisco

    Cara peço desculpas mesmo mas hoje é o dia de apresentar para a pré-banca um trabalho muito complicado e estou na pilha e apertado com isso, mas se conseguir fazer o vídeo consigo lhe ajudar mais fácil, eu estava testando até outra função, mas me mande seu vídeo vai facilitar.

    Obrigado.

  • adailton disse:

    ai cara como que faiz para que possamos trovar o select da barrinha por um botao posicionado no local x da tela? tipo tenho uma div no canto superior da tela que representaria um carrinho ai no canto direito tenho as imagens de celular, televisao, radio, pc, placa de video etc. ai ao clicar na imagem o cara vai atualizando o seu carrinho com os objetos entendeu mais eu queria que a div nao ficasse mostrando ficasse mostrando so a imagem do carrinho.

    tem geito?

  • Adriano Meira disse:

    Olá Adailton, se entendi bem temo os produtos em um lugar da sua página (imagens) e quando clicar nas imagens se carrega o carrinho no topo do site certo? Se for assim basta criar uma função genérica que vai receber o “id” do produto e numa página extra processar o carrinho de compras e na volta (‘data’) colocar no html do carrinho, uma dica salva este valor em uma sessão para recuperar em outras telas.
    Caso não seja isso posta ai os códigos para eu dar uma ajudinha.
    Abráz!

  • matheus silva disse:

    Oi cara vc parece ser muito bom nisso sou iniciante sera que vc poderia arruma uma aula para fazer uma barra de pesquisa que pesquise e mostre os resutados em uma div criado variaveis que receba uma div ou com um banco de dados que pesquise uma tabela e mostre o cada item na div como no sate animeambient.net

    Ajuda ai

  • jacinto disse:

    Alo Adriano!
    Venho buscando e lendo desde la longe do vovo google, mas como a viagem foi mesmo longa, mas por fim acabei aque eu chegando!
    Olhando estou tentando, carregar um conteudo de uma pagina externa, para exibir na minha pagina.
    se eu usar o php consigo exatamente fazer isso com apenas duas linhas

    —codigo—

    so que o meu problema ele nao consegue buscar, o conteudo devido ao bloqueio do servidor externo.
    A minha duvida ‘e: Tem como eu pegar este conteudo sem autorizacao do servidor externo?
    A materia esta relacionada com cross domain, mas nao estou a conseguir enxergar bem a solucao!

  • Adriano Meira disse:

    Olá Jacinto

    Realmente por segurança, muito servidores bloqueiam este tipo de ação com Javascrit, uma solução é utilizar o cURL do PHP, veja aqui na biblioteca do PHP http://php.net/manual/pt_BR/book.curl.php, com mais detalhes eu já usei algumas vezes e se me lembro ele trás um array com todo o HTML da página, depois disso, você pode tratar para pegar o valor que deseja.

  • Valmir disse:

    Boa tarde.
    Preciso de ajuda, estou a procura de um plugin em jquery para selecionar preço em uma barra de rolagem.
    Agradeço desde já,

  • Adriano Meira disse:

    Olá Valmir

    Um plugin pronto e com toda a magia eu desconheço, mas de uma conferida neste post que fiz http://www.adrianomeira.com/blog/buscar-conteudo-na-pagina-funcao-keyup-do-jquery onde faço pesquisa em um elemento via função keyUp.

    Até mais!

Publicidade e outros

Marcadores de Página Magnético

 

Leia e Liberte pelo BookCrossing.com ...