Fontos:
A jQuery 1.4-től kezdve, ha a JSON-fájl szintaktikai hibát tartalmaz, a kérés általában csendben meghiúsul.
Emiatt kerülje a JSON-adatok gyakori kézi szerkesztését.
A JSON egy adatcsere-formátum, amelynek szintaktikai szabályai szigorúbbak, mint a JavaScript objektumliterális jelölései.
Például a JSON-ban megjelenített összes karakterláncot, akár tulajdonságról, akár értékről van szó, dupla idézőjelek közé kell tenni.
A JSON-formátum, JavaScript-objektumokat értékel.
Szintaktikailag megegyezik a JavaScript objektumok létrehozásához használt kóddal.
Hasonlóság miatt, a JavaScript-programok könnyen konvertálhatják a JSON-adatokat natív, JavaScript-objektumokká.
JSON szintaktikai szabályok:
Az adatok név/érték párokban vannak.
Az adatok vesszővel vannak elválasztva.
A kapcsos zárójelek, témákat, rekordokat tartalmaznak. (Ha egy tárgy, vagy személy azonosításához, több adat is tartozik.)
A szögletes zárójelek, tömböket tartanak.
JSON-szintaxis minták:
1.Minta.
{ "egy": "Szabó Ferenc ---- Beosztása = Ruhaszabó", "kettő": "Kertész János ---- Beosztása = Kertépítő", "három": "Kovács Anna ---- Beosztása = Cukrász", "négy": "Jakab Péter ---- Beosztása = Pék" }
2.Minta. (4 alkalmazotti rekordból (objektumból) álló tömb.)
{ "alkalmazottak":[ {"firstName":"Ferenc", "lastName":"Szabó"}, {"firstName":"János", "lastName":"Kertész"}, {"firstName":"Anna", "lastName":"Kovács"}, {"firstName":"Peter", "lastName":"Jakab"} ] }
A "scrip" és tartalma, külső "json" kiterjesztésű fájlban van.
Tartalom kiíratása, a "body" területén, és általunk kiválasztott elme területén jelenik meg.
Megjegyzés:
Otthon történő tesztelésnél.
Ha ezt a JSON fájlt egyszer lekérdeztük, majd módosítottuk tartalmát, és ismét lekérdezzük,
előfordulhat, hogy az eredeti tartalom jelenik meg, a módosított helyett.
Ekkor a böngészőt be kell zárni, és újból megnyitni, hogy a módosított tartalmat kapjuk vissza.
json_pelda.json
Ezt a json kiterjesztésű fájlt, a "mintak" nevű mappába helyezzük el, a következő tartalommal.
{ "egy": "Szabó Ferenc ---- Beosztása = Ruhaszabó", "kettő": "Kertész János ---- Beosztása = Kertépítő", "három": "Kovács Anna ---- Beosztása = Cukrász", "négy": "Jakab Péter ---- Beosztása = Pék" }
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#btn_json").click(function(){ $.getJSON("mintak/json_pelda.json", function(result){ $("#jsondiv").html(" "); // Ez nem kötelező. De, megakadályozza az ismétlődő kiíratásokat. $.each(result, function(i, field){ $("#jsondiv").append(i +": "+ field + " <br>"); }); }); }); }); </script> </head> <body> <button id="btn_json">Get JSON adat. Katt ide.</button> <p>Lekérdezési adatok:</p> <div id="jsondiv"></div> <!-- Lekérdezett tartalom, ezen a div elem területén jelenik meg. --> </body>
Lekérdezési adatok:
A "scrip" és tartalma, külső "json" kiterjesztésű fájlban van.
Tartalom kiíratása, a "body" területén, és általunk kiválasztott elme területén jelenik meg.
Megjegyzés: Otthon történő tesztelésnél.
Ha ezt a fájlt egyszer lekérdeztük, majd módosítottuk tartalmát, és ismét lekérdezzük,
előfordulhat, hogy az eredeti tartalom jelenik meg, a módosított helyett.
Ekkor a böngészőt be kell zárni, és újból megnyitni, hogy a módosított tartalmat kapjuk vissza.
json_tombpelda.json
Ezt a json kiterjesztésű fájlt, a "mintak" nevű mappába helyezzük el, a következő tartalommal.
{ "alkalmazottak":[ {"firstName":"Ferenc", "lastName":"Szabó", "beosztasa":"Ruhaszabó"}, {"firstName":"János", "lastName":"Kertész", "beosztasa":"Kertépítő"}, {"firstName":"Anna", "lastName":"Kovács", "beosztasa":"Cukrász"}, {"firstName":"Gábor", "lastName":"Jakab", "beosztasa":"Lakatos"} ] }
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#btn_jsontomb").click(function(){ $.getJSON("mintak/json_tombpelda.json", function(data){ $("#jsontombdiv").html(" "); // Ez nem kötelező. De, megakadályozza az ismétlődő kiíratásokat. $.each(data, function(key, val){ $("#jsontombdiv").append("<strong>"+ key +" </strong><br>"); // Kiíratjuk a tömb nevét. let text = ""; val.forEach(myFunction); document.getElementById("jsontombdiv").innerHTML += text; function myFunction(elem, index) { text+= index + ": " + elem["lastName"] +" "+ elem["firstName"] +" --- "+ elem["beosztasa"] + "<br>"; } }); }); }); }); </script> </head> <body> <button id="btn_jsontomb">Get JSON tömb adat. Katt ide.</button> <p>Lekérdezési adatok:</p> <div id="jsontombdiv"></div> <!-- Lekérdezett tartalom, ezen a div elem területén, jelenik meg. --> </body>
Lekérdezési adatok:
A "scrip" és tartalma a "szövegfolyam" területén van.
Tartalom kiíratása, a "body" területén, és általunk kiválasztott elem területén jelenik meg.
JSON-szöveg konvertálása JavaScript-objektummá. A JSON gyakori használata a webszerverről származó adatok beolvasása, és az adatok weboldalon való megjelenítése. Példában a szemléltetés, egy karakterlánc bemeneti használatával történik.
<body> <p id="jsondemo"> </p> <p>Teljes tartalom: <br> <span id="jsondemotomb"> </span> </p> <script> // Először hozzunk létre egy JSON-szintaxist tartalmazó, JavaScript-sztringet: let text = '{ "alkalmazottak" : [' + '{ "firstName":"Ferenc" , "lastName":"Szabó" , "szakma":"Ruhaszabó" },' + '{ "firstName":"János" , "lastName":"Kertész" , "szakma":"Kertépítő" },' + '{ "firstName":"Anna" , "lastName":"Kovács" , "szakma":"Cukrász" },' + '{ "firstName":"Péter" , "lastName":"Jakab" , "szakma":"Pék" } ] }'; // Ezután a beépített JavaScript függvény, JSON.parse() segítségével, konvertálja a karakterláncot JavaScript objektummá: const obj = JSON.parse(text); // Most már használhatjuk az új JavaScript objektumot, az oldalon: // Egy kiválasztott adatait kérdezzük le.: document.getElementById("jsondemo").innerHTML = obj.alkalmazottak[1].firstName + " " + obj.alkalmazottak[1].lastName; // Teljes tartalom adatait is, lekérdezhetjük: for(i=0; i<4; i++){ document.getElementById("jsondemotomb").innerHTML += "Neve = "+obj.alkalmazottak[i].lastName + " " + obj.alkalmazottak[i].firstName + " ---- Beosztása = " + obj.alkalmazottak[i].szakma + "<br>"; } </script> </body>
Fenti program lekért adata, itt jelenik meg.
Teljes tartalom: