Como recoger valores de un Json con ajax

Quiero recoger los valores de latitud, longitud desde un json generado en php y almacenarlos en las variables x, y en mi html. Pero no sé como hacer esto. Soy nuevo y ando un poco perdido.

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title> Acción onclick en js </title>
    // Aquí esta la referencia a jquery
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script>
    $(document).on('ready',function(){
      $('#btn-ingresar').click(function(){
        $.ajax({                        
           type: "POST",                 
           url: "ejemplo2.php",                    
           data: $("#formulario").serialize(),
           success: function(respuesta)            
           {
               $('#resp').html(respuesta);
           }
         });
      });
    });
    </script>
  </head>
<?php
        include ("conexion.php");
        $cod=$_POST['municipio'];
        $poligono=$_POST['poligono'];
        $parcela=$_POST['parcela'];
        $recinto=$_POST['recinto'];
    $resultados=mysqli_query($cone,"Select longitud,latitud From inventario1 Where cod='$cod' AND poligono='$poligono' AND parcela='$parcela' AND recinto='$recinto'");
    while ($consulta=mysqli_fetch_array($resultados))
    {
          $x = $consulta['longitud'];
          $y = $consulta['latitud'];
    }
    include ("cerrar_conexion.php");
    // mostrar el valor por pantalla
    //echo $x;
    //echo $y;
    $coord= array("longitud"=>"$x","latitud"=>"$y");
    echo(json_encode($coord));
    ?>
    
1

1 respuesta

Respuesta
1

En el lado Cliente (html) quedaría algo así:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <title>Acción onclick en js</title>
  </head>
  <body>
    <form id="form-coordenadas" action="index.html" method="post">
      <label for="latitud">Latitud:</label>
      <input type="text" name="latitud" id="latitud" value="">
      <label for="longitud">Longitud:</label>
      <input type="text" name="longitud" id="longitud" value="">
      <input type="submit" name="" value="Enviar formulario">
    </form>
    <script type="text/javascript">
      $(document).on('ready',function(){
        GetLatLon();
        $('#form-coordenadas').submit(function(event){
          event.preventDefault();
          alert('Aquí envías el formulario: lat: ' + $('#form-coordenadas #latitud').val() + ', long: ' + $('#form-coordenadas #longitud').val());
        });
      });
      var GetLatLon = function(){
        $.ajax({type: "POST", url: "function_php.php", dataType: "json",
          success: function(coordenadas){
            $('#form-coordenadas #latitud').val(coordenadas.latitud);
            $('#form-coordenadas #longitud').val(coordenadas.longitud);
          }
        });
      }
    </script>
  </body>
</html>

Y en el lado servidor (php) así:

<?php
$latitud = 12.576855;
$longitud = -81.70505200000002;
$coordenadas = array('latitud' => $latitud, 'longitud' => $longitud);
header('Content-Type: application/json');
echo json_encode($coordenadas);
?>

Cualquier duda con gusto te ayudaré.

https://www.70y7.com/ 

Muchas gracias por la respuesta. Entiendo el código pero sigo sin resolver mi problema. En mi código recojo los valores de <municipio><poligono><parcela><recinto> con ellos los envío a php mediante post y hago una consulta en la base de datos obteniendo como resultado $x=longitud y $y=longitud. Hasta ahí bien, el problema viene cuando quiero regresar las variables $x,$y a html para almacenarlas en javascript y obtener las variables JS (x,y). ¿cómo puedo asignar los valores devueltos a x,y?  muchas gracias por tu ayuda!

Al final he conseguido solucionar mi problema, he añadido dos input(lat, long) a mi buscador de parcelas de tal manera que añado ahí los resultados de la consulta a la BD. Por un lado amplio los criterios de búsqueda sobre el mapa y por el otro me viene bien para almacenar las variables. Lo adjunto por si sirve de ayuda a alguien mas.

$('#form-coordenadas #latitud').val(coordenadas.latitud);
$('#form-coordenadas #longitud').val(coordenadas.longitud);

y luego las saco con javascript:

var y=document.getElementById("latitud").value;
var x=document.getElementById("longitud").value;

Que bien! :)

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas