Jump to content
Sign in to follow this  
NadoLoko

Ajuda para buscar dados do banco conforme Select option selecionado

Recommended Posts

Galera sou novato em linguagem web e gostaria de uma ajuda, depois de muito quebrar a cabeça. Tenho um banco de dados com uma tabela de categorias e outra de alimentos. Na minha index tenho um <select> e uma <div>. Quando inicializo a pagina, o select é carregado com todas as categorias do banco. O tenho que fazer, e nao estou conseguindo, é que, ao selecionar uma determinada categoria, a div sera carregada com os elementos daquela categoria, se eu selecionar outra categoria no select, os elementos da div mudam para os elementos da nova categoria selecionada e assim sucessivamente. Consigo pegar o valor selecionado com jQuery mas nao consigo passar e chamar a função no meu arquivo php, muito menos tornar isso dinâmico. Preciso de alguma ideia, de açgum caminho que devo seguir.

Share this post


Link to post
Share on other sites

Tenta esse código abaixo.

Ai eh só editar a pagina de busca para ele print o que você quer.

<script>

//função para pegar o objeto ajax do navegador
function xmlhttp()
{
	// XMLHttpRequest para firefox e outros navegadores
	if (window.XMLHttpRequest)
	{
		return new XMLHttpRequest();
	}

	// ActiveXObject para navegadores microsoft
	var versao = ['Microsoft.XMLHttp', 'Msxml2.XMLHttp', 'Msxml2.XMLHttp.6.0', 'Msxml2.XMLHttp.5.0', 'Msxml2.XMLHttp.4.0', 'Msxml2.XMLHttp.3.0','Msxml2.DOMDocument.3.0'];
	for (var i = 0; i < versao.length; i++)
	{
		try
		{
			return new ActiveXObject(versao[i]);
		}
		catch(e)
		{
			alert("Seu navegador não possui recursos para o uso do AJAX!");
		}
	} // fecha for
	return null;
} // fecha função xmlhttp

//função para fazer a requisição da página que efetuará a consulta no DB
function carregar()
{
   a = document.getElementById('ID_DO_SELECT').value;
   ajax = xmlhttp();
   if (ajax)
   {
	   ajax.open('get','CAMINHO_DO_DOCUMENTO_BUSCA?NOME_DO_SELECT='+a, true);
	   ajax.onreadystatechange = trazconteudo; 
	   ajax.send(null);
   }
}

//função para incluir o conteúdo na pagina
function trazconteudo()
{
	if (ajax.readyState==4)
	{
		if (ajax.status==200)
		{
			document.getElementById('ID_DA_DIV').innerHTML = ajax.responseText;
		}
	}
}

</script>

Share this post


Link to post
Share on other sites

Marlon255 valeu pela ajuda. Depois de ver sua resposta fui procurar saber como funcionava e encontrei uma forma de fazer utilizando $.ajax. Tecnicamente nao cheguei a testar seu codigo, mas através dele tive o caminho que deveria procurar. Mais uma vez, valeu.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By Anonicah
      Olá preciso de ajuda com esse exercício. Montei até a parte de formulário + validação de javascrip no dreamweaver mas buguei com o resto. O que eu fiz:
       

      <html>
      <head>
      <title> Formulário CPF validado com Java Script </title>
          
          <script language="javascript" type="text/javascript">
      function validar() {
      var cpf = form1.cpf.value;
          
      if (cpf == "") {
      alert('Preencha o campo com seu cpf');
      form1.cpf.focus();
      return false;
      }
          
      }
      </script>
          
          
      </head>
      <body>
      <form name="form1" action="enviar.php" method="post">
      CPF:
      <input name="cpf" type="text"><br /><br />
      <input type="submit"  onclick="return validar()">
      </form>
      </body>
      </html>
       
       
      EXERCÍCIO
      Criar um formulário simples em html com um único campo CPF;
      Fazer uma validação em javascript antes de fazer o post;
      Consumir o WS https://bi.vidaclass.com.br/utils para consultar informações do CPF enviado pelo form;
      Do retorno obtido exibir na tela:
      Nome, email, telefone
      Se tem compra em saude: Sim | Não
      Quantas compras: (5) ex.
      Se tem farma: Sim | Não
      Se tem dependente: Sim | Não
      Qtd. de dependentes: (2) ex.

      Obtem o token para consumir os endpoints;
      https://bi.vidaclass.com.br/auth
      {
          "company_id": 1,
          "username": "webmaster@vidaclass.com.br",
          "password": "Teste20170705"
      }
      Endpoint para consultar o CPF
      https://bi.vidaclass.com.br/utils
      {
          "action": 4,
          "key": {
              "cpf": 25383193820
          }
      }
    • By Luciano Marques
      Então pessoal é o seguinte: Estou tendo problemas para impedir acesso simultâneo no meu projeto. Foi depois de muito pesquisar que vim aqui abrir esse tópico. 
      Enfim, eu até consegui colocar uma teoria em prática que era a de criar uma coluna na tabela `usuarios` com 1 para ativo, e 2 para  inativo. e depois coloquei no topo a condição IF para se 1 já preenchido não permite o login. até ai de boa. o problema vem se o usuário não desloga só fecha a janela. a coluna ainda permanece como ativa 1. mesmo expirando o login, não ocorre o update na base de dados. Se alguém puder me ajudar nessa, preciso concluir esse trabalho ainda essa semana. desde já agradeço 
    • By paulojk
      Como faço essa funçao alguem sabe? Depos que o usuario clica no botao so libera depois de um determinado tempo.
       


    • By iagomonteiro
      Estou criando um jogo de cartas em web, o jogo é bem estilo HS, e estou tendo problemas para adicionar condições de movimentação no drag and drop. Como vocês podem ver eu tenho uma variável mana, e a movimentação das cartas só seria possível de acordo com ela, porém quando adiciono as condições o D&D acaba nem se movimentando mais, pensei em chamar cada função do d&d dentro de uma condição, mas também não funcionou, alguém pode ajudar?
       
      JS
      // Jogador 1
      const fillplace1 = document.querySelector('#fillplace1');
      const fillplace2 = document.querySelector('#fillplace2');
      const fillplace3 = document.querySelector('#fillplace3');
      var fill;
      const empties = document.querySelectorAll('.empty');
      fillplace1.addEventListener('dragstart', enterstart);
      fillplace2.addEventListener('dragstart', enterstart);
      fillplace3.addEventListener('dragstart', enterstart);
      for (const empty of empties) {
          empty.addEventListener('dragover', dragOver);
          empty.addEventListener('dragenter', dragEnter);
          empty.addEventListener('dragleave', dragLeave);
          empty.addEventListener('drop', dragDrop);
      }
      function enterstart(){
          fill = this;
      }
      function dragOver(e) {
          e.preventDefault();
      }
      function dragEnter(e) {
          e.preventDefault();
          this.className += ' hovered';
      }
      function dragLeave() {
          this.className = 'empty';
      }
      function dragDrop(id) {
          this.className = 'empty';
          this.append(fill);
      }
       
      HTML
      <link rel="stylesheet" href="../css/jogar.css" />
       
      <div id="barraGeneral">
          <img src="../imagens/Campo/barraGeneralalfa.png" id="imggeneral" />
      </div>
       
      <div id="persona">
          <img src="../imagens/Personagem/cucapersonagem.png" id="imgpersonagem" />
      </div>
       
      <button id="btpassar" onclick="cont();">Passar Rodada</button>

      <H1 id="campomana">1</H1>
       
      <!-- Mesa das cartas jogador 1-->
      <div class="empty" id="emptyplace1">
      </div>
      <div class="empty" id="emptyplace2">
      </div>
      <div class="empty" id="emptyplace3">
      </div>
      <div class="empty" id="emptyplace4">
      </div>
      <div class="empty" id="emptyplace5">
      </div>
       
      <!-- Mão do jogador 1 -->
      <div class="emptyhand1">
          <div class="fill" draggable="true" id="fillplace1">
              <img src='../imagens/Sorteio/aa.png' draggable='true'>
          </div>
      </div>
       
      <div class="emptyhand2">
          <div class="fill" draggable="true" id="fillplace2">
              <img src='../imagens/Sorteio/aa2.png' draggable='true'>
          </div>
      </div>
       
      <div class="emptyhand3">
          <div class="fill" draggable="true" id="fillplace3">
              <img src='../imagens/Sorteio/aa2.png' draggable='true'>
          </div>
      </div>
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.