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

<!DOCTYPE html>
<html>

<head>
  <title>Ejemplo de jQuery</title>
  <meta charset="UTF-8">
</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>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="funciones.js"></script>
</body>

</html>

funciones.js

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

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

function presionSubmit() {
  let v = $("#dni").val();
  $.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: application/json');
$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 json_encode(['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() {
  let v = $("#dni").val();
  $.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: application/json');
$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 json_encode(['nombre'=>$nombre,'apellido'=>$apellido,'direccion'=>$direccion]);
?>


Retornar