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:
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
 
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:
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:
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>
 
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
 
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:

Discussioni simili