Método jQuery getJSON()

En este artículo, aprenderemos sobre el método getJSON() en jQuery, además de comprender su implementación a través del ejemplo. jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más»

El método getJSON() en jQuery obtiene datos codificados en JSON del servidor mediante una solicitud GET HTTP.

Sintaxis:

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

Parámetros: este método acepta tres parámetros, como se mencionó anteriormente y se describe a continuación:

  • url: Es un parámetro obligatorio. Se utiliza para especificar la URL en forma de string a la que se envía la solicitud.
  • data: Es un parámetro opcional que especifica los datos que serán enviados al servidor.
  • devolución de llamada: también es un parámetro opcional que se ejecuta cuando la solicitud tiene éxito.

Valor devuelto: Devuelve el objeto XMLHttpRequest.

Consulte los artículos Tutorial de jQuery y Ejemplos de jQuery para obtener más detalles.

Ejemplo: El siguiente ejemplo ilustra el método getJSON() en jQuery.

archivo empleado.json:


«nombre»: «Tony Stark», 
«edad»: «53», 
«rol»: «Escritor de contenido técnico», 
«compañía»: «Geeks para Geeks» 
}

Aquí, obtenemos el archivo JSON y mostramos su contenido.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>jQuery getJSON() Method</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
      
    <!-- Script to get JSON file and display its content -->
    <script type="text/javascript" language="javascript">
    $(document).ready(function() {
        $("#fetch").click(function(event) {
            $.getJSON('employee.json', function(emp) {
                $('#display').html('<p> Name: ' + emp.name + '</p>');
                $('#display').append('<p>Age : ' + emp.age + '</p>');
                $('#display').append('<p> Role: ' + emp.role + '</p>');
                $('#display').append('<p> Company: '
                + emp.company 
                + '</p>');
            });
        });
    });
    </script>
</head>
  
<body>
      
<p> Click on the button to fetch employee data </p>
  
    <div id="display" style="background-color:#39B54A;"></div>
    <input type="button" id="fetch" value="Fetch Employee Data" /> </body>
  
</html>

Producción:

 método getJSON()

Publicación traducida automáticamente

Artículo escrito por AnkitMishra16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *