¡Ayuda al desarrollo del sitio, compartiendo el artículo con amigos!

Introducción a jQuery getJSON()

JSON significa notación de objetos de JavaScript. JSON es muy popular por la forma de intercambiar datos y, al usarlo, podemos mostrar, diseñar y modificar los datos. El método getJSON () en JQuery se usa para cargar u obtener los datos codificados en JSON. En algunos de los casos cuando solicitamos al servidor devolverá la cadena JSON. La cadena resultante estará disponible para la función de devolución de llamada del método getJSON(). El método getJSON () utilizará la solicitud GET HTTP. En palabras simples, el método getJSON() se usa para obtener los datos con formato JSON.

Sintaxis y parámetros

El método getJSON () se usa para obtener los datos JSON. Devuelve el objeto de solicitud HTTP XML. La sintaxis del método getJSON () en JQuery.

Sintaxis:

$(selector).getJSON(url(, datos)(, función))

Parámetros:

Toma tres parámetros. Los detalles de los parámetros son:

  • URL: Es de tipo string y es obligatorio dar o enviar la URL al método getJSON(). En este, especificaremos la url a la que se tiene que enviar la solicitud.
  • Data: Es de tipo cadena o el objeto simple y es un parámetro opcional. En este, la solicitud se enviará al servidor.
  • Función: Es un parámetro opcional. Es una función que se ejecutará si la solicitud tiene éxito. De nuevo consta de tres parámetros adicionales. Son datos, estado y xhr.
    • Data: Es del tipo de objeto simple. Los datos que se devuelven desde el servidor estarán aquí.
    • Estado: Es de tipo cadena. Contiene el estado del texto. Puede ser éxito, error, no modificado, tiempo de espera o error del analizador.
    • Xhr: Es del tipo jqXHR. Contiene la solicitud HTTP XML. Tiene jqXHR.done() indica el éxito. El jqXHR.fail() indica error y tiene jqXHR.always().

¿Cómo usar jQuery getJSON()?

  • Antes de llamar al método getJSON (), la URL que necesitamos enviar al método para el cual necesitamos crear el archivo json.
  • Primero tenemos que instalar npm.
  • Para instalar npm, debemos ejecutar este comando en el símbolo del sistema: npm install -global json-server
  • Después de ejecutar el comando anterior, tenemos que crear y nombrar el archivo y guardar el archivo como filename.json. (el nombre del archivo puede ser cualquier cosa según sus requisitos).
  • Después de guardar el archivo, ejecute el siguiente comando en el símbolo del sistema:
  • Json-servidor -ver nombre de archivo.json
  • Ahora si escribiremos esta URL en el navegador http://localhost:3000/filename. Abrirá el archivo y mostrará los datos que hemos escrito en el archivo.
  • Siguiendo el procedimiento anterior, creé un archivo y lo llamé db.json.
  • El contenido presente en el archivo db.json es el siguiente:

Código:

{
"publicaciones: (
"{
"identificación: 1,
""título: json-servidor,
""autor: ABC
"}
),
"comentarios: (
"{
"identificación: 1,
""cuerpo: algún comentario,
""ID de la publicación: 1
"}
),
"perfil: {
""nombre: Raju
"}
}

  • Después de escribir la URL en el navegador como http://localhost:3000/profile (aquí estoy ejecutando solo el perfil del archivo db.json, por lo que la URL será como se muestra arriba), el resultado será como se muestra abajo.

  • Ahora estamos usando esta URL en nuestro programa. En los siguientes ejemplos se mostrará cómo usamos esta URL en el método getJSON () y cómo obtenemos datos.

Ejemplos de jQuery getJSON()

Los siguientes son los ejemplos que se dan a continuación:

Ejemplo 1

Este es un ejemplo simple del método getJSON (). En este ejemplo, podemos observar cómo funcionará el método getJSON ().

Código:


Ejemplo del método getJSON()
Ejemplo del método getJSON()
obtener datos JSON

Salida:

  • En el programa anterior, podemos observar que hemos pasado la URL a getJSON (), será redirigido al archivo que hemos creado y obtendrá los datos del archivo.
  • En este ejemplo, antes de hacer clic en el botón obtener datos JSON, la salida será como se muestra a continuación.

  • Después de hacer clic en el botón obtener datos JSON, la salida será como se muestra a continuación. Al hacer clic en el botón podemos observar que se muestra el contenido en el perfil db.json-.

Ejemplo 2

Este es otro ejemplo del método getJSON ().

Código:


Ejemplo del método getJSON()
obtener datos JSON

Salida:

  • Este ejemplo es el mismo que el ejemplo anterior aquí, hemos usado agregar en lugar de html porque al hacer clic en el botón, los datos se repiten.
  • En este ejemplo, antes de hacer clic en el botón obtener datos JSON, el resultado es el que se muestra a continuación.

  • Después de hacer clic en el botón obtener datos JSON, la salida será como se muestra a continuación.

Podemos observar que el nombre se repite haciendo clic en el botón obtener datos JSON.

Ejemplo 3

Este es un ejemplo del método getJSON().

Código:


Ejemplo del método getJSON()
Ejemplo del método getJSON ()
obtener datos JSON

Salida:

Al ejecutar http://localhost:3000/posts en el navegador, podemos observar que el resultado se muestra a continuación.

  • Podemos ver en el código anterior que hemos pasado esta URL al método getJSON (). Entonces obtendrá los datos que muestran el contenido en la salida.
  • Antes de hacer clic en el botón obtener datos JSON. La salida se mostrará como se muestra a continuación.

  • Después de hacer clic en el botón obtener datos JSON, la salida será como se muestra a continuación.

Estos son algunos de los programas de ejemplo que le ayudarán a comprender el método getJSON().

¡Ayuda al desarrollo del sitio, compartiendo el artículo con amigos!

Categoría:

Lenguajes de programación