$.getJSON en jQuery

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

$.getJSON

El método getJSON () se utiliza para obtener datos JSON mediante una solicitud GET HTTP de AJAX.

La sintaxis de esta función es:

$(selector).getJSON(url,data,success(data,status,xhr))

Ejemplo

Obtenga datos JSON mediante una solicitud AJAX y genere el resultado:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

$(document).ready(function(){
  $("button").click(function(){
    $.getJSON("demo_ajax_json.js", function(result){
      $.each(result, function(i, field){
        $("div").append(field + " ");
      });
    });
  });
});
</script>
</head>
<body>
<button>Obtener datos con JSON </button>
<div></div>
</body>
</html>

Ver ejemplo anterior

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="func28.js"></script>
</body>

</html>

Ver ejemplo anterior

func28.js

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

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

function presionSubmit() {
  let v = $("#dni").val();
  $.getJSON("pag28.php", { dni: v }, llegadaDatos);
  return false;
}

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

pag28.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]);
?>

(adsbygoogle = window.adsbygoogle || []).push({});

$.getJSON en jQuery

$.getJSON