Buscar Dados à BD

Ricardo Gonçalves · May 28, 2012 at 05:13 PM

boa tarde,

Estou com uma dúvida queria saber como é que posso seleccionar uma tabela da Base de dados com javascript? nesta situação é primeira vez que estou a fazer, trabalho muito com javascript agora nunca fiz foi buscar dados através desta linguagem, é que eu queria fazer o select que era para depois em java buscar esses valores que estão numa tabela, alguém podia ajudar?

cumps,

Ricardo Gonçalves

Edited May 28, 2012 at 05:13 PM by Ricardo Gonçalves

Knitter · May 28, 2012 at 05:28 PM

Java ou JavaScript? Mencionas aí as duas, afinal qual delas é?

Se for JavaScript, assumindo que não estás a usar JavaScript no servidor, não consegues, precisas de algo no servidor que te faça isso. Se estás a usar JavaScript no servidor, convém saber que tecnologia.

Ricardo Gonçalves · May 29, 2012 at 10:32 AM

O que prentendo é , eu tenho este código referido embaixo.

<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(41.1746519, -8.5995051);
     var myOptions = {
       zoom: 8,
       center: latlng,
       mapTypeId: google.maps.MapTypeId.ROADMAP 
     };
     var firstmap = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 


var point = new google.maps[b].[/b]LatLng[b]( 
[left]41.1457924[/left]
[/size], -
[left]8.5254136[/left]
[/size]);[/b]
var marker = new google.maps.Marker({
position: point,
map: firstmap,
title: "...", 
icon:'images/piones.png'
})

os valores que estão a negrito eu quero que ele vá buscar á Base de Dados para apresentar no mapa.

Como é que eu faço?

HappyHippyHippo · May 29, 2012 at 10:37 AM

ou forneces no momento da criação da página (php)

ou usas ajax ...

Knitter · May 29, 2012 at 10:42 AM

Como mencionaram, vais ter de usar uma qualquer linguagem no servidor, seja PHP ou outra coisa qualquer e seja fornecido no momento da criação da página ou usando AJAX, terás de ter uma linguagem de servidor que execute o pedido à BD porque o JavaScript é executado exclusivamente no browser.

Ricardo Gonçalves · May 29, 2012 at 10:44 AM

eu no inicio da página tenho a ligação á BD e fiz o seguinte também em PHP

$query = 'SELECT * FROM marcador';
 $resultado = mysql_query($query) or die (mysql_error());

eu aqui seleccionei a tabela que eu quero agora queria é que em vez de por os números manualmente na página quero que ele vá buscar á BD qual a melhor forma de fazer nesta situação?

então Knitter como posso buscar os dados á BD? a melhor forma?

Edited May 30, 2012 at 12:32 PM by brunoais
geshi!

XicoXperto · May 29, 2012 at 02:30 PM

Não sou nenhum expert, mas a abordagem que eu tomei para este tipo de material é enviar o pedido por post através do Ajax (eu uso jQuery).

Aqui está a função que permite isso.

jQuery.post( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )

então seria necessário fazer algo do genero:

jQuery.post(
  "ficheiro_com_resposta.php" ,
  {
  nome_de_uma_variable : "acao a fazer",
  outra_variavel : "informacao a procurar"
  },
  function ( output ) {
  jQuery( "#id_do_local_onde_queres_adicionar" ).append( output );
  });

e no ficheiro "ficheiro_com_resposta.php":

if ( !empty( $_POST['nome_da_variavel'] ) && $_POST['nome_da_variavel'] == 'acao a fazer'  ) {
  echo  vaiBuscarInformacao ( $_POST['outra_variavel'] );
}

O .post() devolve para o callback ( function ( output ) {...} ) o que é escrito para o "ecra" do ficheiro em questão, e depois podes pegar na variavel output e fazeres o que pretendes com ela.

Não sei se apenas com javascript consegues trabalhar com ajax, pelo menos nunca o fiz.

Ricardo Gonçalves · May 29, 2012 at 02:47 PM

mas depois de utilizar o jQuery como passo a informação para o link finalizar para depois transferir para o outro documento e ser apresentado?

XicoXperto · May 29, 2012 at 03:11 PM

mas depois de utilizar o jQuery como passo a informação para o link finalizar para depois transferir para o outro documento e ser apresentado?

Por defeito ele devolve como HTML (pelo que entendi), isto é, uma string. Poderás arranjar um sistema em que envias os dados separados por virgulas e pontos, exemplo:

elemento1row1,elemento2row1,elemento3row1.
elemento1row2,elemento2row2,elemento3row2.
elemento1row3,elemento2row3,elemento3row3.
elemento1row4,elemento2row4,elemento3row4.

Poderás depois separar os dados com a função split(),

//por exemplo, se os valores em cima estivessem numa variavel chamada "output"
var linhas_do_resultado = output.split("."); // dividir as linhas do resultado
var dados; 
var i=0;
for ( var linha in linhas_do_resultado ) {
  dados[i] = linha.split(",");  // dividir cada elemento de cada linha
  i++;
}

Não testei mas isto deve dar para usares a variavel dados como um array de 2 dimensões:

ex: dados[2][3] => elemento3row2

No entanto, podes estudar [data type] na função .post(), nunca usei, mas ela permite escolher o tipo de dados que estás a espera.

Não sei se existe opções mais viaveis, embora acredite que sim 😛 mas este sistema funciona comigo.

(EDIT: comentarios no código)

Edited May 29, 2012 at 03:12 PM by XicoXperto

Ricardo Gonçalves · May 29, 2012 at 03:20 PM

mas como ponho isso na página? desculpa mas este tipo de linguagem é primeira vez que utilizo sempre utilizei php e css utilizei muito pouco o javascript, por isso neste tipo de linguagem ainda estou muito verde, por enquanto 😛

HappyHippyHippo · May 29, 2012 at 03:22 PM

o post do jquery aceita um parâmetro que especifica que tipo de dados espera (neste caso seria json para fácil manipulação)

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

Ricardo Gonçalves · May 29, 2012 at 05:51 PM

o código do ajax posso por dentro do script?

Tive a ver o código que está na página e tenho umas duvidas, vou por aqui e era para ver o que tenho mal

no site está este código:

$. Ajax ({
 type: 'POST',
 url: url ,
 dados: dados e
 sucesso: o sucesso ,
 dataType: dataType
});

Neste código no type deixo estar como está no ur tenho de por o nome do ficheiro onde estou a trabalhar não é?

Nos dados, sucesso e dataType o que ponho? estive a ver lá a definição mas não percebi muito bem.

$ Post. ("Ajax / teste.html ', function (data) {
 $ ('Resultado'.) Html (de dados).;
});

este código é que não percebi, em vez de teste.html tenho de por a minha página de PHP que estou a utilizar?

podes-me ajudar a fazer isto?

se for preciso ponho aqui o código todo que estou a utilizar para tentares implementar na minha página

cumps

XicoXperto · May 29, 2012 at 06:12 PM

o código do ajax posso por dentro do script?

Tive a ver o código que está na página e tenho umas duvidas, vou por aqui e era para ver o que tenho mal

no site está este código:
$. Ajax ({
 type: 'POST',
 url: url ,
 dados: dados e
 sucesso: o sucesso ,
 dataType: dataType
});
Neste código no type deixo estar como está no ur tenho de por o nome do ficheiro onde estou a trabalhar não é?

Nos dados, sucesso e dataType o que ponho? estive a ver lá a definição mas não percebi muito bem.
$ Post. ("Ajax / teste.html ', function (data) {
 $ ('Resultado'.) Html (de dados).;
});
este código é que não percebi, em vez de teste.html tenho de por a minha página de PHP que estou a utilizar?

podes-me ajudar a fazer isto?

se for preciso ponho aqui o código todo que estou a utilizar para tentares implementar na minha página

cumps

Hmm, se copiaste o código integralmente, tens ai uns espacos no nome do ficheiro que vão dar erro.

isto é o seguinte, um caso simples :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//PT">
<html>
<head>
 <!-- jQuery -->
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
 <script language="javascript">
 $.post ( "informacao.php" , function (data)  {$('#myDiv').html(data); } );
 </script>
</head>
<body>
<section>
<!-- este div vai ser preenchido após carregar a pagina -->
  <div id="myDiv">
	</div>
</section>
</body>
</html>

e no informacao.php

<?php
echo '<b>Fui carregado por ajax</b>';
?>

Testei e está a funcionar, só precisas de por ambos os ficheiros no teu servidor php

$ Post. ("Ajax / teste.html ', function (data) {
 $ ('Resultado'.) Html (de dados).;
});
este código é que não percebi, em vez de teste.html tenho de por a minha página de PHP que estou a utilizar?

podes-me ajudar a fazer isto?

Sim no "Ajax / teste.html" tens de por o nome (e caminho) para o teu ficheiro

Edited May 30, 2012 at 12:33 PM by brunoais
geshi!

Ricardo Gonçalves · May 29, 2012 at 06:37 PM

o servidor que estou a utilizar é o localhost Mysql no xampp como ponho estes ficheiro lá? desculpa por não estar a perceber porque nunca toquei no ajax utilizei sempre o PHP e eu ajax para já não sei nada. 😞

XicoXperto · May 29, 2012 at 06:42 PM

o servidor que estou a utilizar é o localhost Mysql no xampp como ponho estes ficheiro lá? desculpa por não estar a perceber porque nunca toquei no ajax utilizei sempre o PHP e eu ajax para já não sei nada. 😞

A culpa é minha, não me expliquei devidamente, o que eu queria dizer era para pores os ficheiros dentro da tua pasta referente ao "localhost", exactamente onde pões os outros ficheiros de php... Mas ambos os ficheiros devem estar na mesma pasta...

Isto porque apesar do javascript (jQuery) não necessitar de trabalho de servidor, o PHP é necessário ser pre-processado pelo servidor, neste caso é o localhost (o xampp é que processa os ficheiros) que trata disso. 👍

PS. (espero não estar a dizer nenhuma barbaridade, mas isto é assim que sei ) 🙂

HappyHippyHippo · May 29, 2012 at 06:56 PM

não necessita de ser na mesma pasta desde que o URL fornecido à função post seja correcto

XicoXperto · May 29, 2012 at 06:57 PM

não necessita de ser na mesma pasta desde que o URL fornecido à função post seja correcto

Sim, eu estava apenas a dizer a mesma pasta, mas para o exemplo que fiz

sergioleal · May 30, 2012 at 07:30 AM

eu no inicio da página tenho a ligação á BD e fiz o seguinte também em PHP
$query = 'SELECT * FROM marcador';
 $resultado = mysql_query($query) or die (mysql_error());
eu aqui seleccionei a tabela que eu quero agora queria é que em vez de por os números manualmente na página quero que ele vá buscar á BD qual a melhor forma de fazer nesta situação?

Pelo que percebi tens a consulta à base de dados no inicio da página e mais abaixo o código javascript onde queres colocar as coordenadas que estão guardadas na base de dados.


<?php
 $query = 'SELECT lat, lng FROM marcador LIMIT 1';
 $resultado = mysql_query($query) or die (mysql_error());
 $dados = mysql_fetch_assoc($resultado);
 mysql_free_result($resultado);
?>

<script>
 function initialize() {
var latlng = new google.maps.LatLng(<?php echo $dados['lat']; ?>, -<?php echo $dados['lng']; ?>);
var myOptions = {
  zoom: 8,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var firstmap = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var point = new google.maps.LatLng(<?php echo $dados['lat']; ?>, -<?php echo $dados['lng']; ?>);
var marker = new google.maps.Marker({
  position: point,
  map: firstmap,
  title: "...",
  icon:'images/piones.png'
});
 };
</script>

Edited May 30, 2012 at 12:34 PM by brunoais
geshi!

Ricardo Gonçalves · May 30, 2012 at 09:22 AM

Pelo que percebi tens a consulta à base de dados no inicio da página e mais abaixo o código javascript onde queres colocar as coordenadas que estão guardadas na base de dados.


<?php
 $query = 'SELECT lat, lng FROM marcador LIMIT 1';
 $resultado = mysql_query($query) or die (mysql_error());
 $dados = mysql_fetch_assoc($resultado);
 mysql_free_result($resultado);
?>


<script>
 function initialize() {
var latlng = new google.maps.LatLng(<?php echo $dados['lat']; ?>, -<?php echo $dados['lng']; ?>);
var myOptions = {
  zoom: 8,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var firstmap = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var point = new google.maps.LatLng(<?php echo $dados['lat']; ?>, -<?php echo $dados['lng']; ?>);
var marker = new google.maps.Marker({
  position: point,
  map: firstmap,
  title: "...",
  icon:'images/piones.png'
});
 };
</script>

se por este código ele imprime os valores para o código fonte e não apresenta no mapa

sergioleal · May 30, 2012 at 07:40 PM

Como não tenho a certeza o método que pretendes utilizar criei 3 exemplos rápidos no gist.

Ex. 1

Tens todo o código (html, php e javascript) num só ficheiro index.php.

https://gist.github.com/2838316

Ex. 2

Neste caso tens 2 ficheiros index.html e script.js.php

O ficheiro index.html a única coisa que faz é incluir o ficheiro script.js.php como se tratasse de um ficheiro javascript.

O ficheiro script.js.php vai ser processado pelo servidor e servido como se tratasse de um javascript normal.

https://gist.github.com/2838330

Ex. 3

Neste caso utilizas 3 ficheiro index.html, script.js e coordenadas.php.

O ficheiro coordenadas.php vai buscar as coodenadas à base de dados e enviar o resultado no formato JSON.

O script.js, através do XMLHTTPRequest (Ajax), recebe os dados do coordenadas.php.

O index.html apenas inclui o script.js.

https://gist.github.com/2838330

Sign In

Buscar Dados à BD

Recommended Posts

Ricardo Gonçalves

Knitter

Ricardo Gonçalves

HappyHippyHippo

Knitter

Ricardo Gonçalves

XicoXperto

Ricardo Gonçalves

XicoXperto

Ricardo Gonçalves

HappyHippyHippo

Ricardo Gonçalves

XicoXperto

Ricardo Gonçalves

XicoXperto

HappyHippyHippo

XicoXperto

sergioleal

Ricardo Gonçalves

sergioleal

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information