Ver Mensaje Individual
  #3 (permalink)  
Antiguo 15/10/2015, 14:09
sintel_1
 
Fecha de Ingreso: enero-2014
Ubicación: Navarra
Mensajes: 94
Antigüedad: 10 años, 10 meses
Puntos: 18
Respuesta: Problema con ajax

Hola.

En el codigo que muestras hay varios errores.

en php no puedes pasar los parametros como en JS

cambia:
function distance(a, b, c, d, e) {

por:
function distance($lat1, $lon1, $lat2, $lon2, $unit) {

y los datos devueltos mediante ajax tambien lo tienes mal
echo '<div id="distanciaCalc" data="'.$distanciaM.'"></div>';

esto no tiene sentido, la capa debe estar en el archivo que llama a php
podrias cambiarlo por:

echo '<h2>Distancia en metros : ' .$distanciaM. '</h2>';


por otro lado en el archivo js tienes un error, no puedes mandar data y recibir data.

tendrias que hacer algo asi:

pagina html

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2.   <title>distancia</title>
  3. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>  
  5. <script type="text/javascript">
  6. $(document).ready(function(){
  7.     $('#btn').click(function(){
  8.         var latOrig = $('input[name=latOrig]').val();
  9.         var longOrig = $('input[name=longOrig]').val();
  10.         var latDestino = $('input[name=latDestino]').val();
  11.         var longDestino = $('input[name=longDestino]').val();
  12.     $.ajax({
  13.     type: "POST",
  14.     url: "distancia.php",
  15.     data: {lat1: latOrig, long1: longOrig, lat2: latDestino, long2: longDestino},
  16.     success: function(dato) {
  17.     $('#distanciaCalc').html(dato);
  18.     }
  19.     });
  20.     });
  21.    
  22. });//fin de ready        
  23. </head>
  24.   <body>
  25.   <form method="POST">
  26.   <table border="0">
  27.   <tr><td>Latitud original </td><td><input type="text" name="latOrig"></td></tr>
  28.   <tr><td>Longitud original </td><td><input type="text" name="longOrig"></td></tr>
  29.   <tr><td>Latitud destino </td><td><input type="text" name="latDestino"></td></tr>
  30.   <tr><td>Longitud destino </td><td><input type="text" name="longDestino"></td></tr>
  31.   </table>
  32.   </form>
  33.   <a href="#" id="btn">Calcular distancia</a>
  34.   <div id="distanciaCalc">Distancia</div>
  35.   </body>
  36.   </html>

y el archivo distancia.php
Código PHP:
Ver original
  1. <?php
  2.   header('Access-Control-Allow-Origin: *');
  3.  
  4.     $latOrig = $_POST['lat1'];
  5.     $longOrig = $_POST['long1'];
  6.     $latDestino = $_POST['lat2'];
  7.     $longDestino = $_POST['long2'];
  8.    
  9.     function distance($lat1, $lon1, $lat2, $lon2, $unit) {
  10.         $theta = $lon1 - $lon2;
  11.         $dist = sin(deg2rad($lat1)) * sin(deg2rad($lat2)) +  cos(deg2rad($lat1)) * cos(deg2rad($lat2)) * cos(deg2rad($theta));
  12.         $dist = acos($dist);
  13.         $dist = rad2deg($dist);
  14.         $miles = $dist * 60 * 1.1515;
  15.         $unit = strtoupper($unit);
  16.      
  17.         if($unit == "K")
  18.         {
  19.             return ($miles * 1.609344);
  20.         }
  21.         elseif($unit == "N") {
  22.             return ($miles * 0.8684);
  23.         }
  24.         else
  25.         {
  26.             return $miles;
  27.         }
  28.     }
  29.      
  30.     $distanciaKm = distance($latOrig, $longOrig, $latDestino, $longDestino, "K");
  31.     $distanciaM = ($distanciaKm * 1000) + 200;
  32.      
  33.     echo '<h2>Distancia en metros : ' .$distanciaM. '</h2>';
  34.   ?>

A ver si asi te ayuda a entender el concepto de $.ajax()
saludos