Utilice la función getJSON() en jQuery para cargar datos JSON. La función getJSON() utiliza una solicitud GET HTTP para recuperar datos codificados en JSON del servidor. En este artículo, aprenderemos sobre la función jQuery getJSON() y su implementación a través de ejemplos.
Sintaxis:
$(selector).getJSON(url, data, success(data, status, xhr))
Parámetros: este método acepta tres argumentos, que se enumeran a continuación:
- url: La URL del argumento es necesaria. Se utiliza para indicar la URL como una string a la que se envía la solicitud.
- data: Es un parámetro que es opcional e indica los datos que serán transmitidos al servidor.
- devolución de llamada: también es un argumento opcional que se ejecuta si la solicitud es exitosa.
Valor devuelto: Devuelve un objeto XMLHttpRequest .
Ejemplo 1: en este ejemplo, usamos la función getJSON() para recuperar datos JSON de un archivo JSON externo. Hay un archivo JSON externo titulado emp.json que contiene la información de un empleado.
La URL y la función de devolución de llamada son dos argumentos del método getJSON() que estamos utilizando. Obtiene datos codificados en JSON del servidor mediante una solicitud GET HTTP. El parámetro de URL se ha establecido en emp.json . La función de devolución de llamada tiene dos parámetros data y status . El primer argumento contiene el contenido de la página solicitada, mientras que el segundo contiene el estado de la solicitud. La carga de datos del servidor es visible en la salida y el estado de la solicitud es un éxito .
Para recuperar los datos del archivo JSON externo, debemos hacer clic en el botón dado.
emp.json:
{
"name": "Vishal Kumar",
"age" : "22",
"gender": "Male",
"salary": 56000
}
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
body {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#output {
background-color: #ecf721;
}
</style>
<script>
$(document).ready(function () {
$("#btn").click(function (event) {
$.getJSON("emp.json", function (emp) {
$("#output").html("<p> Name: "
+ emp.name + "</p>");
$("#output").append("<p>Age : "
+ emp.age + "</p>");
$("#output").append("<p>Gender: "
+ emp.gender + "</p>");
$("#output").append("<p>Salary: "
+ emp.salary + "</p>");
});
});
});
</script>
</head>
<body>
<h2 style="color:green;">
GeeksforGeeks
</h2>
<p>
Click on the button to load
data from emp.json file
</p>
<div id="output"></div>
<input type="button" id="btn"
value="Get Employee Data" />
</body>
</html>
Producción:
Ejemplo 2: el siguiente ejemplo utiliza el método getJSON() para cargar las comillas aleatorias de la API de Formastic .
Cada vez que el usuario hace clic en el botón dado, se realiza una solicitud al servidor API. Al recibir datos del servidor con éxito, se dirige a la interfaz done que contiene una función de devolución de llamada que tiene un parámetro llamado cotización . Este parámetro contiene los datos de la página solicitada.
Si hay un error al recibir los datos, pasa a la función de devolución de llamada fallida que tiene un parámetro llamado err . Este parámetro contiene el mensaje de error devuelto por un servidor que puede iniciar sesión e intentar resolver.
HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<style>
body {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#quote {
background-color: #25bf1a;
}
</style>
</head>
<body>
<h2 style="color:green;">
GeeksforGeeks
</h2>
<p>Click on the button to call API</p>
<div id="quote"></div>
<input type="button" id="btn" value="Call API" />
<script>
$(document).ready(function () {
var forismaticAPI =
"http:.../api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?";
$("#btn").click(function () {
$.getJSON(forismaticAPI)
.done(function (quote) {
$("#quote").html("<p> quoteText: "
+ quote.quoteText + "</p>");
$("#quote").append("<p>quoteAuthor : "
+ quote.quoteAuthor + "</p>"
);
$("#quote").append("<p>senderName: "
+ quote.senderName + "</p>");
$("#quote").append("<p>senderLink: "
+ quote.senderLink + "</p>");
$("#quote").append("<p>quoteLink: "
+ quote.quoteLink + "</p>");
})
.fail(function (err) {
console.log(err);
});
});
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por vishalkumar98765432 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA