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));
?>
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! :)
