Problema con ajax

kenproxd · #1 (**permalink**) 15/10/2015, 06:57

Buenas,

estoy intentando hacer cálculos mediante una function en un archivo php enviando valores con ajax pero obtengo como respuesta un valor undefined.

Código Javascript:

Ver original$.ajax({
type: "POST",
url: "distancia.php",
data: {lat1: latOrig, long1: longOrig, lat2: latDestino, long2: longDestino},
success: function(data) {
console.log($('#distanciaCalc').attr('data'));
}
});

Este es el archivo distancia.php

Código PHP:

Ver original<?php 
header('Access-Control-Allow-Origin: *');
$latOrig = $_POST['lat1'];
$longOrig = $_POST['long1'];
$latDestino = $_POST['lat2'];
$longDestino = $_POST['long2'];
 
function distance(a, b, c, d, e) { 
    $theta = $lon1 - $lon2; 
    $dist = sin(deg2rad($lat1)) * sin(deg2rad($lat2)) +  cos(deg2rad($lat1)) * cos(deg2rad($lat2)) * cos(deg2rad($theta)); 
    $dist = acos($dist); 
    $dist = rad2deg($dist); 
    $miles = $dist * 60 * 1.1515;
    $unit = strtoupper($unit);
 
    if($unit == "K")
    {
        return ($miles * 1.609344); 
    }
    elseif($unit == "N") {
        return ($miles * 0.8684);
    }
    else
    {
        return $miles;
    }
}
 
$distanciaKm = distance($latOrig, $longOrig, $latDestino, $longDestino, "K");
$distanciaM = ($distanciaKm * 1000) + 200;
 
echo '<div id="distanciaCalc" data="'.$distanciaM.'"></div>';
 
?>

Alexis88 · #2 (**permalink**) 15/10/2015, 14:01

Eso ocurre porque el contenido generado por el archivo PHP, carga después de que la página principal cargó, por lo tanto, el código JavaScript no encuentra al elemento que intentas tomar.

Sería mucho más sencillo si tan solo devolvieras el valor que deseas obtener.

Saludos

sintel_1 · #3 (**permalink**) 15/10/2015, 14:09

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<!DOCTYPE html>
<html>
<head>
  <title>distancia</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>  
<script type="text/javascript"> 
$(document).ready(function(){
    $('#btn').click(function(){ 
        var latOrig = $('input[name=latOrig]').val();
        var longOrig = $('input[name=longOrig]').val();
        var latDestino = $('input[name=latDestino]').val();
        var longDestino = $('input[name=longDestino]').val();
    $.ajax({
    type: "POST",
    url: "distancia.php",
    data: {lat1: latOrig, long1: longOrig, lat2: latDestino, long2: longDestino},
    success: function(dato) {
    $('#distanciaCalc').html(dato);
    }
    });
    });
    
});//fin de ready         
</script>
</head>
  <body>
  <form method="POST">
  <table border="0">
  <tr><td>Latitud original </td><td><input type="text" name="latOrig"></td></tr>
  <tr><td>Longitud original </td><td><input type="text" name="longOrig"></td></tr>
  <tr><td>Latitud destino </td><td><input type="text" name="latDestino"></td></tr>
  <tr><td>Longitud destino </td><td><input type="text" name="longDestino"></td></tr>
  </table>
  </form>
  <a href="#" id="btn">Calcular distancia</a>
  <div id="distanciaCalc">Distancia</div>
  </body> 
  </html>

y el archivo distancia.php

Código PHP:

Ver original<?php
  header('Access-Control-Allow-Origin: *');
 
    $latOrig = $_POST['lat1'];
    $longOrig = $_POST['long1'];
    $latDestino = $_POST['lat2'];
    $longDestino = $_POST['long2'];
   
    function distance($lat1, $lon1, $lat2, $lon2, $unit) { 
        $theta = $lon1 - $lon2; 
        $dist = sin(deg2rad($lat1)) * sin(deg2rad($lat2)) +  cos(deg2rad($lat1)) * cos(deg2rad($lat2)) * cos(deg2rad($theta)); 
        $dist = acos($dist); 
        $dist = rad2deg($dist); 
        $miles = $dist * 60 * 1.1515;
        $unit = strtoupper($unit);
     
        if($unit == "K")
        {
            return ($miles * 1.609344); 
        }
        elseif($unit == "N") {
            return ($miles * 0.8684);
        }
        else
        {
            return $miles;
        }
    }
     
    $distanciaKm = distance($latOrig, $longOrig, $latDestino, $longDestino, "K");
    $distanciaM = ($distanciaKm * 1000) + 200;
     
    echo '<h2>Distancia en metros : ' .$distanciaM. '</h2>';
  ?>

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

kenproxd · #4 (**permalink**) 16/10/2015, 10:35

muchas gracias por su ayuda!