28 - $.getJSON

La función getJSON hace una petición de datos al servidor considerando que retorna la información con notación JSON. La sintaxis de esta función es:

$.getJSON([nombre de la página], [parámetros], [función que recibe los datos])

La función getJSON procede a generar un objeto en JavaScript y nosotros en la función lo procesamos.

Problema:Confeccionar un sitio que permita ingresar el documento de una persona y nos retorne su apellido, nombre y lugar donde debe votar.

pagina1.html

<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>
</head>
<body>
Ingrese dni (solo existen los valores 1,2 y 3):<input type="text" 
name="dni" id="dni" size="10"><br>
<input type="button" value="Enviar" id="boton1">
<div id="resultados"></div>
</body>
</html>

funciones.js

var x;
x=$(document);
x.ready(inicializarEventos);

function inicializarEventos()
{
  var x;
  x=$("#boton1");
  x.click(presionSubmit);
}

function presionSubmit()
{
  var v=$("#dni").attr("value");
  $.getJSON("pagina1.php",{dni:v},llegadaDatos); 
  return false;
}

function llegadaDatos(datos)
{
 $("#resultados").html("Nombre:"+datos.nombre+
                       "<br>"+"Apellido:"+
                       datos.apellido+"<br>"+
                       "Direccion:"+datos.direccion);
}

pagina1.php

<?php
header('Content-Type: text/txt; charset=ISO-8859-1');
$nombre='';
$apellido='';
$direccion='';
if ($_REQUEST['dni']=='1')
{
  $nombre='Juan';
  $apellido='Rodriguez';
  $direccion='Colon 123';
}
if ($_REQUEST['dni']=='2')
{
  $nombre='Ana';
  $apellido='Maldonado';
  $direccion='Lima 245';
}
if ($_REQUEST['dni']=='3')
{
  $nombre='laura';
  $apellido='Pueyrredon';
  $direccion='Laprida 785';
}
echo "{
  'nombre':'$nombre',
  'apellido':'$apellido',
  'direccion':'$direccion'
}";
?>

Cuando se presiona el botón submit procedemos a realizar la petición asincrónica utilizando la función getJSON:

function presionSubmit()
{
  var v=$("#dni").attr("value");
  $.getJSON("pagina1.php",{dni:v},llegadaDatos); 
  return false;
}

Como hemos llamado a la función getJSON la misma nos retorna un objeto JavaScript para procesarlo:

function llegadaDatos(datos)
{
 $("#resultados").html("Nombre:"+datos.nombre+
                       "<br>"+"Apellido:"+
                       datos.apellido+"<br>"+
                       "Direccion:"+datos.direccion);
}

Tengamos en cuenta que el programa en el servidor debe retornar un archivo con notación JSON:

<?php
header('Content-Type: text/txt; charset=ISO-8859-1');
$nombre='';
$apellido='';
$direccion='';
if ($_REQUEST['dni']=='1')
{
  $nombre='Juan';
  $apellido='Rodriguez';
  $direccion='Colon 123';
}
if ($_REQUEST['dni']=='2')
{
  $nombre='Ana';
  $apellido='Maldonado';
  $direccion='Lima 245';
}
if ($_REQUEST['dni']=='3')
{
  $nombre='laura';
  $apellido='Pueyrredon';
  $direccion='Laprida 785';
}
echo "{
  'nombre':'$nombre',
  'apellido':'$apellido',
  'direccion':'$direccion'
}";
?>


Retornar