Jump to content
EToS

[Resolvido], Selecionar informação através de uma query fornecida por um select

Recommended Posts

EToS

Boa tarde pessoal,

Gostaria de implementar um sistema em que ao clicar num campo de um select (HTML) fize-se uma query a BD e devolve-se na mesma página a informação da query.

Um exemplo é: O select "Creative Fields" do site http://www.behance.net.

Se alguém souber como fazer algo do género agradecia que partilha-se os links e a informação.

Cumprimentos.,

Flávio Rodrigues.

Share this post


Link to post
Share on other sites
taviroquai

Viva!

Esse comportamento consegue-se com AJAX.

http://pt.wikipedia.org/wiki/AJAX_(programa%C3%A7%C3%A3o)

Um resumo de como funciona:

[*]Com javascript faz um pedido assíncrono a um ficheiro php

[*]No servidor, o php faz a query à base de dados

[*](duas hipoteses):

[*]O php devolve HTML

[*]O php devolve os dados noutro formato, por exemplo JSON

[*]no final do pedido AJAX, com javascript trabalha-se os dados recebidos, por exemplo colocar o HTML no elemento que se quer preencher

Se procurares aqui no forum por ajax deves encontrar montes de exemplos...

Vê também como usar ajax com frameworks JS:

http://api.jquery.com/jQuery.ajax/

http://www.prototypejs.org/learn/introduction-to-ajax

http://demos111.mootools.net/Ajax

Por aí...

Share this post


Link to post
Share on other sites
EToS

Desde já lhe agradeço pela ajuda.

Não percebi muito bem o raciocínio, pedia-lhe que caso saiba de um script, que faça mais ou menos o mesmo que eu pretendo, que partilhe por favor.

Cumprimentos.,

Flávio Rodrigues.

Share this post


Link to post
Share on other sites
taviroquai

Exemplo. Mete estes dois ficheiros numa pasta para testares.

index.html

<html><head>
<script src="http://code.jquery.com/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function carregar() {
$.ajax({
  url: 'teste.html',
  success: function(data) {
	$('#result').html(data);
	alert('Load was performed.');
  }
});
}
</script>
</head>
<body>
<select onchange="carregar()"><option value="1">opção1</option><option value="1">opção2</option></select>
<div id="result"></div>
</body>
</html>

Depois o ficheiro teste.html na mesma pasta.

<p>Olá Mundo do Ajax</p>

Isto foi tirado dos links que indicamos...

Como disse no 1º post:

Viva!

Esse comportamento consegue-se com AJAX.

http://pt.wikipedia.org/wiki/AJAX_(programa%C3%A7%C3%A3o)

Um resumo de como funciona:

[*]Com javascript faz um pedido assíncrono a um ficheiro php

[*]No servidor, o php faz a query à base de dados

[*](duas hipoteses):

[*]O php devolve HTML

[*]O php devolve os dados noutro formato, por exemplo JSON

[*]no final do pedido AJAX, com javascript trabalha-se os dados recebidos, por exemplo colocar o HTML no elemento que se quer preencher

Agora olha para o código acima...

1) $.ajax() // É com isto que fazes os pedidos ao servidor

2) url: 'teste.html' // É com isto que indicas qual o ficheiro que queres correr no servidor, podia ser teste.php

4) $('#result').html(data); // É com isto que colocas o resultado no elemento com id="result"

Como vês, são 3 linhas de código (se usares uma framework como o jQuery na linha:

<script src="http://code.jquery.com/jquery-1.5.2.min.js" type="text/javascript"></script>

Espero que ajude ;)

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

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.