Foros del Web - Ver Mensaje Individual

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