Ajutați dezvoltarea site -ului, împărtășind articolul cu prietenii!

Introducere în jQuery getJSON()

JSON înseamnă JavaScript Object Notation. JSON este foarte popular pentru modul de schimb de date și prin utilizarea acestuia putem afișa, stila și modifica datele. Metoda getJSON () din JQuery este utilizată pentru a încărca sau pentru a obține datele codificate JSON. În unele dintre cazurile în care solicităm serverului, acesta va returna șirul JSON. Șirul rezultat va fi disponibil pentru funcția de apel invers a metodei getJSON (). Metoda getJSON () va folosi cererea HTTP GET. Cu cuvinte simple, metoda getJSON() este folosită pentru obținerea datelor în format JSON.

Sintaxă și parametri

Metoda getJSON () este folosită pentru a obține datele JSON. Returnează obiectul XML HTTP Request. Sintaxa metodei getJSON () în JQuery.

Sintaxă:

$(selector).getJSON(url(, data)(, function))

Parametri:

Este nevoie de trei parametri. Detaliile parametrilor sunt:

  • URL: Este de tip șir și este obligatoriu să dați sau să trimiteți adresa URL către metoda getJSON (). În aceasta, vom specifica adresa URL la care trebuie să trimită cererea pentru.
  • Date: Este de tip șir sau obiect simplu și este un parametru opțional. În aceasta, cererea va fi trimisă la server.
  • Funcție: Este un parametru opțional. Este o funcție care va fi executată dacă cererea are succes. Constă din nou din trei parametri suplimentari. Acestea sunt date, status și xhr.
    • Date: Este de tip obiect simplu. Datele care sunt returnate de la server vor fi aici.
    • Stare: Este de tip șir. Conține starea textului. Poate fi succes, eroare, notmodified, timeout sau parsererror.
    • Xhr: Este de tip jqXHR. Conține cererea HTTP XML. Are jqXHR.done() indică succesul. jqXHR.fail() indică eroare și are jqXHR.always().

Cum se utilizează jQuery getJSON()?

  • Înainte de a numi metoda getJSON () URL-ul pe care trebuie să-l trimitem la metoda pentru care trebuie să creăm fișierul json.
  • Mai întâi trebuie să instalăm npm.
  • Pentru a instala npm, trebuie să executăm această comandă în promptul de comandă: npm install -global json-server
  • După executarea comenzii de mai sus trebuie să creăm și să denumim fișierul și să-l salvăm ca filename.json. (numele fișierului poate fi orice în funcție de cerințele dvs.)
  • După salvarea fișierului, executați următoarea comandă în promptul de comandă:
  • Json-server -watch filename.json
  • Acum, dacă vom introduce această adresă URL în browser http://localhost:3000/filename. Acesta va deschide fișierul și va afișa datele pe care le-am scris în fișier.
  • Urmând procedura de mai sus, am creat un fișier și l-am numit db.json.
  • Conținutul prezent în fișierul db.json este următorul:

Cod:

{
"postări: (
"{
"ID: 1,
""titlu: json-server,
""autor: ABC
"}
),
"comentarii: (
"{
"ID: 1,
""body: un comentariu,
""ID post: 1
"}
),
"profil: {
""nume: Raju
"}
}

  • După ce ați introdus adresa URL în browser ca http://localhost:3000/profile (aici execut doar profilul din fișierul db.json, deci URL-ul va fi așa cum se arată mai sus) rezultatul va fi așa cum se arată mai jos.

  • Acum folosim această adresă URL în programul nostru. Modul în care folosim această adresă URL în metoda getJSON () și modul în care obținem date vor fi afișate în exemplele de mai jos.

Exemple de jQuery getJSON()

Următoarele sunt exemplele de mai jos:

Exemplu 1

Acesta este un exemplu simplu al metodei getJSON (). În acest exemplu, putem observa cum va funcționa metoda getJSON ().

Cod:


Exemplu al metodei getJSON()
Exemplu pentru metoda getJSON()
obțineți date JSON

Ieșire:

  • În programul de mai sus putem observa că am transmis URL-ul către getJSON (), acesta va fi redirecționat către fișierul pe care l-am creat și obține datele din fișier.
  • În acest exemplu, înainte de a face clic pe butonul obține date JSON, rezultatul va fi așa cum se arată mai jos.

  • După ce faceți clic pe butonul getJSON data, rezultatul va fi așa cum se arată mai jos. Făcând clic pe buton putem observa că este afișat conținutul din profilul db.json-.

Exemplu 2

Acesta este un alt exemplu al metodei getJSON ().

Cod:


Exemplu al metodei getJSON()
obțineți date JSON

Ieșire:

  • Acest exemplu este același cu exemplul de mai sus, aici am folosit append în loc de html, deoarece, făcând clic pe butonul, datele se repetă.
  • În acest exemplu, înainte de a face clic pe butonul obține date JSON, rezultatul este așa cum se arată mai jos.

  • După ce faceți clic pe butonul obține date JSON, rezultatul va fi așa cum se arată mai jos.

Putem observa că numele se repetă făcând clic pe butonul getJSON data.

Exemplu 3

Acesta este un exemplu al metodei getJSON().

Cod:


Exemplu al metodei getJSON()
Exemplu pentru metoda getJSON ()
obțineți date JSON

Ieșire:

Prin executarea http://localhost:3000/posts în browser, putem observa că rezultatul va fi afișat mai jos.

  • Putem vedea în codul de mai sus că am transmis această adresă URL metodei getJSON (). Deci, va primi datele afișează conținutul în ieșire.
  • Înainte de a face clic pe butonul obține date JSON. Rezultatul va fi afișat așa cum se arată mai jos.

  • După ce faceți clic pe butonul obține date JSON, rezultatul va fi așa cum se arată mai jos.

Acestea sunt câteva dintre exemplele de programe care vă vor ajuta să înțelegeți metoda getJSON().

Ajutați dezvoltarea site -ului, împărtășind articolul cu prietenii!

Categorie:

Limbaje de programare