Passare variabili da javascript a PHP

Akille67

Utente Attivo
24 Giu 2012
25
0
1
salve come faccio a passare delle variabili create da un javascript al PHP?
metto qua il codice:
PHP:
<!DOCTYPE html>
<html>
<head charset="utf-8">
<title >Geolocalizzazione</title>
<style type="text/css">
body { margin: 1.8em; font: 1.7em/2em verdana, san-serif; }
span { color: #f00; }
li { list-style-type: none; } 
</style>
</head>
<body>

<script type="text/javascript">
if (!!navigator.geolocation) {
navigator.geolocation.getCurrentPosition(geolocali zzami);
}
else {
alert("Geolocalizzazione non supportata");
}
function geolocalizzami(position) {
document.getElementById("lon").innerHTML = position.coords.longitude;
document.getElementById("lat").innerHTML = position.coords.latitude;
document.getElementById("when").innerHTML= new Date(position.timestamp);
}
</script>

<u>LA TUA POSIZIONE:</u>
<ul>
<li>Longitudine: <span id="lon">-</span></li>
<li>Latitudine: <span id="lat">-</span></li>
<li>Data: <span id="when">-</span></li>
</ul>
</body>
</html>

devo passare al PHP lon e lat nella stessa pagina, senza ricaricarla, per visualizzare dei waitpoint presi da un data base.


Grazie Alberto
 
Ultima modifica di un moderatore:

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
146
63
PR
www.borgo-italia.it
ciao
non puoi passare direttamnte le variabili js a php
php è lato server e quindi eseguito prima di js
javascript è lato client e quindi eseguito dopo
devi ricorrere a ajax o jquery
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao,ti conviene utilizzare la libreria jquer, per comodità puoi includere l'ultima a disposizione sul loro sito
HTML:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
io preferisco scricarmi una versione e includerla localmente
con juery la chiamata ajax ad una pagina php diventa semplice
Codice:
$.post("pagina.php", {lon: position.coords.longitude, lat: position.coords.latitude}, function (risposta) {
    // nella variabile risposta avrai l'output che ha generato la pagian php
});
in questo caso nella pagina php ti arrivano i dati lon e lat nella variabile $_POST
fai qualche prova e se ti blocchi posta pure
 
Ultima modifica:

Akille67

Utente Attivo
24 Giu 2012
25
0
1
scusami ma sono veramente incapace...

ho inserito il codice come hai detto ma non fa nulla...

HTML:
<!DOCTYPE html>
<html>
   <head charset="utf-8">
      <title >Geolocalizzazione</title>
      <style type="text/css">
         body  { margin: 1.8em; font: 1.7em/2em verdana, san-serif; }
         span { color: #f00; }
         li { list-style-type: none; }        
      </style>
   </head>
   <body>
	  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>


      <script type="text/javascript">
         if (!!navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(geolocalizzami);
         }
         else  {
            alert("Geolocalizzazione non supportata");
         }

         function geolocalizzami(position) {
            document.getElementById("lon").innerHTML = position.coords.longitude;
            document.getElementById("lat").innerHTML = position.coords.latitude;
            document.getElementById("when").innerHTML= new Date(position.timestamp);

			$.post("calcola.php", {lon: position.coords.longitude, lat: position.coords.latitude}, function (risposta) {
    // nella variabile risposta avrai l'output che ha generato la pagian php
});

			}
      </script>


<u>LA TUA POSIZIONE:</u>
      <ul>
         <li>Longitudine: <span id="lon">-</span></li>
         <li>Latitudine: <span id="lat">-</span></li>
         <li>Data: <span id="when">-</span></li>
      </ul>
	 
   </body>
</html>
PHP:
<?
include ('common.inc');
/*
// coordinate punto 1
$lat1 = 38.168668;
$lng1 = 15.544298;

// coordinate punto 2
$lat2 = 38.1683010;
$lng2 = 15.5430460;

// calcolo la distanza
$distanza = calcola_distanza($lat1, $lng1, $lat2, $lng2);
foreach ($distanza as $unita => $valore) {
  echo $unita . ': ' . number_format($valore,1) . '<br/>';

}

*/
include ('conn.inc');
echo"<BR><u>ELENCO FERMATE ATM NEL RAGGIO DI 500 mt.</u><BR><BR>";
//query che estrae tutti i record entro 500 mt

$lat =risposta($_GET[lat]);
$lng =risposta($_GET[lon]);


echo"$lat,$lng";

$query=mysql_query("SELECT * FROM fermate WHERE TRUNCATE ( 6363 * sqrt( POW( RADIANS($lat) - RADIANS(latitudine) , 2 ) + POW( RADIANS($lng) - RADIANS(longitudine) , 2 ) ) , 3 ) < 0.5");
$num = mysql_num_rows($query);

$is=0;
while($is<$num)
{
	$rec=mysql_fetch_array($query);
	$numero=$rec[numero];
	$descrizione=$rec[descrizione];
	if ($descrizione=='')
		$descrizione='da definire';

	$lat2 = $rec[latitudine];
	$lng2 = $rec[longitudine];



  $theta = $lng - $lng2;

 // $miles = (sin(deg2rad($latitude1)) * sin(deg2rad($latitude2))) + (cos(deg2rad($latitude1)) * cos(deg2rad($latitude2)) * cos(deg2rad($theta)));

  $miles = (sin(deg2rad($lat)) * sin(deg2rad($lat2))) + (cos(deg2rad($lat)) * cos(deg2rad($lat2)) * cos(deg2rad($theta)));
  $miles = acos($miles);
  $miles = rad2deg($miles);
  $miles = $miles * 60 * 1.1515;
  $feet = $miles * 5280;
  $yards = $feet / 3;
  $kilometers = $miles * 1.609344;
  $meters = number_format($kilometers * 1000,2);

	echo"<B>$numero</B> - $descrizione ($lat2, $lng2)  distanza mt. $meters<br>";

	$is++;
}
?>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<?php
//include('common.inc');
echo"
<script type=\"text/javascript\">
function load()
{
";//fine echo
echo"var sito0 = new google.maps.LatLng(".$lat.",".$lng.");\n\n";
$i=1;
	$getcoord=new Query("SELECT * FROM fermate WHERE TRUNCATE ( 6363 * sqrt( POW( RADIANS($lat) - RADIANS(latitudine) , 2 ) + POW( RADIANS($lng) - RADIANS(longitudine) , 2 ) ) , 3 ) < 0.5");
	while($recle=$getcoord->getNextRow())
	{
		$nomelg=fromdb($recle[numero]);
		$coord=fromdb($recle[latitudine]).','.fromdb($recle[longitudine]);
//		$idluogo=$recle[id];
		$idluogo=$i;
		echo"var sito$idluogo = new google.maps.LatLng($coord);\n\n";
		$i++;
	}
	$getcoord->riavvolgi();
	echo"
	var myMapOptions = {
	zoom: 16,
	center: sito0,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	
	var map = new google.maps.Map(document.getElementById(\"map\"),myMapOptions);

	 var image = new google.maps.MarkerImage(
		'marker-images/image.png',
		new google.maps.Size(40,41),
		new google.maps.Point(0,0),
		new google.maps.Point(20,41)
	  );

	  var shadow = new google.maps.MarkerImage(
		'marker-images/shadow.png',
		new google.maps.Size(64,41),
		new google.maps.Point(0,0),
		new google.maps.Point(20,41)
	  );

	   var image0 = new google.maps.MarkerImage(
		'marker-images/image0.png',
		new google.maps.Size(40,41),
		new google.maps.Point(0,0),
		new google.maps.Point(20,41)
	  );

	  var shadow0 = new google.maps.MarkerImage(
		'marker-images/shadow.png',
		new google.maps.Size(64,41),
		new google.maps.Point(0,0),
		new google.maps.Point(20,41)
	  );
	
  var shape = {
    coord: [27,0,27,1,30,2,31,3,31,4,31,5,32,6,32,7,32,8,32,9,32,10,32,11,32,12,32,13,32,14,33,15,34,16,36,17,37,18,38,19,39,20,39,21,39,22,39,23,39,24,39,25,39,26,39,27,39,28,39,29,36,30,32,31,30,32,30,33,30,34,29,35,29,36,29,37,28,38,28,39,28,40,18,40,17,39,17,38,16,37,15,36,14,35,3,34,1,33,1,32,0,31,0,30,0,29,0,28,0,27,0,26,0,25,0,24,1,23,2,22,2,21,3,20,4,19,4,18,5,17,5,16,4,15,4,14,4,13,4,12,3,11,3,10,3,9,3,8,3,7,2,6,2,5,3,4,3,3,20,2,22,1,23,0,27,0],
    type: 'poly'
  };\n\n\n";//fine echo
	$i=1;
	echo"marker0 = new google.maps.Marker({draggable: false,raiseOnDrag: false,icon: image0,shadow0: shadow0,shape: shape,map: map,	position: sito0});\n \n";

	while($recle=$getcoord->getNextRow())
	{
		$nomelg=fromdb($recle[numero]);
		$coord=fromdb($recle[latitudine]).','.fromdb($recle[longitudine]);
		$idluogo=$i;
		echo"marker$idluogo = new google.maps.Marker({draggable: false,raiseOnDrag: false,icon: image,shadow: shadow,shape: shape,map: map,	position: sito$idluogo});\n \n";
		$i++;
	}
	$i=1;
	$getcoord->riavvolgi();
	echo"
		myInfoWindowOptions0 = {
				content: '<div class=\"info-window-content\"><font size=3 face=verdana><b>Tu sei QUI</b></font></div>', maxWidth: 95
			};

			infoWindow0 = new google.maps.InfoWindow(myInfoWindowOptions0);

			google.maps.event.addListener(marker0, 'mouseover', function() {
				infoWindow0.open(map,marker0);
			});

			google.maps.event.addListener(marker0, 'mouseout', function(){
				infoWindow0.close();
			});";
	while($recle=$getcoord->getNextRow())
	{
		$nomelg=addslashes(fromdb($recle[numero]));
		$deslg=addslashes(fromdb($recle[descrizione]));
		$coord=fromdb($recle[latitudine]).','.fromdb($recle[longitudine]);
		$idluogo=$i;
		echo"
		myInfoWindowOptions$idluogo = {
				content: '<div class=\"info-window-content\"><font size=3 face=verdana><b>Fermata n. $nomelg<br>$deslg</b></font></div>', maxWidth: 275
			};

			infoWindow$idluogo = new google.maps.InfoWindow(myInfoWindowOptions$idluogo);

			google.maps.event.addListener(marker$idluogo, 'mouseover', function() {
				infoWindow$idluogo.open(map,marker$idluogo);
			});

			google.maps.event.addListener(marker$idluogo, 'mouseout', function(){
				infoWindow$idluogo.close();
			});";
			$i++;
	}
	
	
  echo"var flightPlanCoordinates = [".$poly."];";
  echo"var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 5
  });
  
  flightPath.setMap(map);
  ";

echo"
}
</script>";
//fine echo
?>
</HEAD>
<BODY  onload="load()">
<center>
<table width=100%>
	<tr>
		<td bgcolor=#ECEDF1 align=center>
			<table width=100% bgcolor=#ffffff>
				<tr>
					<td colspan=2 ALIGN=CENTER>
						<table width=100% bgcolor=#ffffff>
							<tr>
								<td class=titolopagina colspan=2>:: FERMATE ATM nel raggio di 500 metri</td>
							</tr>
							<tr>
								<td colspan=2 valign=top>
									<table width=100% border=0 cellpadding=1 cellspacing=1>
									<tr>
										<td width=* valign=top>
											<div id="map" style="width:800px;height:800px; border:solid 1px #000000"></div>				
										</td>
									</tr>
									</table>
									
								</td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</td>
	</tr>
</table>
<table width=990 border=0 align=center>
</table>
</center>
</BODY>
</HTML>
 
Ultima modifica di un moderatore:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
La pagina calcola.php è inguardabile, è un misto disordinato di php html e javascript.

Concentriamoci su ajax, la variabile risposta è una variabile javascript, ti servirà per stampare il risultato della pagina php, quindi modifica questo
PHP:
$lat =risposta($_GET[lat]);
$lng =risposta($_GET[lon]);
com'era prima
PHP:
$lat =$_GET[lat];
$lng =$_GET[lon];
la pagina html te la posto per intero con le modifiche
HTML:
<!DOCTYPE html>
<html>
    <head charset="utf-8">
        <title >Geolocalizzazione</title>
        <style type="text/css">
            body { margin: 1.8em; font: 1.7em/2em verdana, san-serif; }
            span { color: #f00; }
            li { list-style-type: none; }
        </style>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            if (!!navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(geolocalizzami);
            }
            else {
                alert("Geolocalizzazione non supportata");
            }

            function geolocalizzami(position) {
                document.getElementById("lon").innerHTML = position.coords.longitude;
                document.getElementById("lat").innerHTML = position.coords.latitude;
                document.getElementById("when").innerHTML = new Date(position.timestamp);

                $.get("calcola.php", {lon: position.coords.longitude, lat: position.coords.latitude}, function (risposta) {
                    $("#result").html(risposta);
                });

            }
        </script>
    </head>
    <body>
        <u>LA TUA POSIZIONE:</u>
        <ul>
            <li>Longitudine: <span id="lon">-</span></li>
            <li>Latitudine: <span id="lat">-</span></li>
            <li>Data: <span id="when">-</span></li>
        </ul>
        <div id="result"></div>
    </body>
</html>
 

Akille67

Utente Attivo
24 Giu 2012
25
0
1
perfetto... il passaggio delle variabili funziona con:
$lat =$_GET[lat];
$lng =$_GET[lon];

mi passa le variabili, fa la query.... ma ora non mi stampa più la mappa di google con i punti selezionati....

Mi fa un quadrato vuoto senza mappa ecc...

Può essere il jquery??

Grazie Alberto
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Il problema è nella pagina php : una pagina richiamata da ajax non puo eseguire codice javascript ma porebbe richiamare una funzione dichiarata nella pagina chiamante che quindi lo esegue, è un concetto difficile e ci vuole un po di esperienza.
Il mio consiglio :
riscrivi calcola.php da zero, separa il codice javascript da quello php e sistema l'HTML.
 
Ultima modifica: