sushiandbox.ru A számítógép elsajátítása - Internet. Skype. Közösségi hálózatok. Leckék a Windowsról.
A JSON formátummal való együttműködéshez a JavaScript globális JSON objektummal rendelkezik. A JSON objektumnak két metódusa van: stringify() és parse() . A két módszeren kívül nem tartalmaz további funkciókat.
stringify() metódus
A stringify() metódus a JavaScript értéket JSON-karakterláncsá alakítja.
Konverziós jellemzők:
- Az átalakítás során talált meghatározatlan érték, függvény vagy szimbólum típusú érték kimarad (ha egy objektumban található), vagy null (ha egy tömbben található).
- A prototípustagokat és a nem felsorolható tulajdonságokat figyelmen kívül hagyja.
Szintaxis
JSON.stringify(érték[, helyettesítő[, szóköz]])Lehetőségek
value Az az érték, amelyet a rendszer JSON-karakterláncsá alakít. helyettesítő (opcionális) A paraméter értéke lehet függvény, tömb vagy null .- A tömb objektumtulajdonságok készletét határozza meg, amelyek szerepelni fognak a JSON-karakterláncban. A tömbértékek a konvertált objektum tulajdonságainak nevének megfelelő karakterláncok.
- A funkció lehetővé teszi az objektumtulajdonságok értékeinek cseréjét egy JSON-karakterláncban. A függvénynek két paramétert kell tartalmaznia: a tulajdonság nevét és a tulajdonság értékét. A tulajdonság neve egy karakterlánc. A függvénynek vissza kell adnia a tulajdonság új értékét.
- Ha a paraméter értéke null , akkor a JSON karakterlánc tartalmazza az objektum összes tulajdonságát.
- A szám megadja az egyes beágyazási szintek behúzásaként használt szóközök számát. Minden további beágyazási szint új behúzással egészül ki. Például, ha a paraméter értéke 2, akkor az első beágyazási szint két szóközzel, a következő beágyazási szint 4 szóközzel lesz behúzva, és így tovább. A szóközök maximális száma 10. Ha ha nagyobb számot ad meg, az automatikusan 10-re csökken.
- A karakterlánc határozza meg az egyes beágyazási szintek behúzásaként használt karaktert. A karakterlánc hossza 10 karakterre van korlátozva, ha hosszabb karakterláncot ad meg, az 10 karakterre csonkolódik. A karakterlánc használatával egy tabulátor ("\t") is használható behúzásként. Minden következő beágyazási szint új behúzás karakterekkel van kitömve. Például, ha a paraméter értéke - (kötőjel), akkor az első egymásba ágyazási szint egy kötőjelet használ behúzásként, a következő beágyazási szint pedig 2 kötőjelet, és így tovább.
Visszatérési érték
JSON karakterlánc.
Példa
let person = ( név: "Homer", életkor: 40, munkahely: ( hely: "Atomerőmű", hely: "Springfield" ) ) // Egyparaméteres példa console.log(JSON.stringify(person)); // "("name":"Homer","age":40,"work":("place":"Atomerőmű","hely":"Springfield"))" // Példa két paraméterrel (tömb ) console.log(JSON.stringify(person, ["név", "életkor"])); // "("name":"Homer","age":40)" // Példa két paraméterrel (függvény) console.log(JSON.stringify(person, function (kulcs, érték)) ( kapcsoló (kulcs) ) ( case "name": return "Bart"; case "age": return 10; case "work": return undefined; default: return value; ) ))); // "("név":"Bart","életkor":10)" // Példa három paraméterrel console.log(JSON.stringify(person, null, 2)); /* ( * "név": "Homer", * "életkor": 40, * "munkahely": ( * "hely": "Atomerőmű", * "hely": "Springfield" * ) * ) */parse() metódus
A parse() metódus a JSON karakterláncot a megfelelő JavaScript értékké alakítja.
Konverziós jellemzők:
- Ha a konverzió során nem definiált érték jelenik meg a JSON-karakterláncban, akkor az kimarad (nem szerepel az eredményben).
Szintaxis
JSON.parse(text[, reviver])Lehetőségek
szöveges JSON-karakterlánc, amelyet a megfelelő JavaScript-értékre kell konvertálni. reviver (opcionális) A paraméter értékének függvénynek kell lennie. A függvény lehetővé teszi egy JSON-karakterlánc tulajdonság értékének lecserélését, mielőtt visszaküldi. A függvénynek két paramétert kell tartalmaznia: a tulajdonság nevét és a tulajdonság értékét. A tulajdonság neve egy karakterlánc. A függvénynek vissza kell adnia a tulajdonság új értékét.Visszatérési érték
A megfelelő JavaScript-érték (primitív érték, objektum vagy tömb).
Példa
JSON-elemzés("()"); // () JSON.parse("igaz"); // igaz JSON.parse(""); // JSON parse("null"); // nullaMi az a JSON és mire képes? Ebből a cikkből megtudhatja, hogyan használhatja a JSON-t ehhez könnyű munka adatokkal. Azt is megvizsgáljuk, hogyan dolgozhatunk JSON-nal PHP és JavaScript használatával.
Ha általában webhelyeket vagy webes alkalmazásokat fejlesztett, akkor valószínűleg hallott már a JSON-ról, legalábbis futólag. De mit jelent pontosan a JSON? Mire képes ez az adatformátum, és hogyan kell használni?
Ebben a cikkben megismerjük a json formátummal való munka alapjait. A következő témákat fogjuk követni:
- Mi az a JSON formátum?
- Hogyan hozzunk létre JSON karakterláncokat?
- Egy egyszerű példa a JSON-adatokra
- A JSON és az XML összehasonlítása
Kezdjük!
Mi az a JSON formátum?
A JSON egy egyszerű, szövegalapú módszer a strukturált adatok tárolására és kommunikálására. Egyszerű szintaxissal egyszerűen mentheti másként egyszerű számokés karakterláncok, és tömbök, objektumok, csak szöveget használva. Objektumokat és tömböket is összekapcsolhat, ami lehetővé teszi összetett adatszerkezetek létrehozását.
A JSON karakterlánc létrehozása után könnyen elküldhető bármely alkalmazásra vagy számítógépre, mivel ez csak szöveg.
A JSON-nak számos előnye van:
- Kompakt
- Ember által olvasható és számítógéppel is könnyen olvasható.
- Könnyen konvertálható programozott formátumokká: numerikus értékek, karakterláncok, logikai formátum, null érték, tömbök és asszociatív tömbök.
- Szinte minden programozási nyelv rendelkezik olyan funkciókkal, amelyek lehetővé teszik a json adatformátum olvasását és létrehozását.
Szó szerint a JSON a JavaScript Object Notation rövidítése. Amint azt korábban leírtuk, ez a formátum objektum-létrehozáson alapul, némileg hasonlóan más programozási nyelvek asszociatív tömbjeihez.
Mi a JSON célja?
Leginkább a json-t használják a JavaScript és a szerveroldali (php) közötti adatcserére. Más szóval, ajax technológiához. Ez nagyon hasznos, ha több változót vagy teljes adattömböt ad át.
Így néz ki a példában:
- A felhasználó rákattint miniatűr képek
- A JavaScript kezeli ezt az eseményt, és ajax kérést küld a PHP szkriptnek, átadva a kép azonosítóját.
- A szerveren a php megkapja a kép leírását, a kép nevét, címét nagy képés egyéb információk az adatbázisból. A kézhezvételt követően JSON formátumba konvertálja, és visszaküldi a felhasználó oldalára.
- A JavaScript JSON formájában fogadja a választ, feldolgozza az adatokat, űrlapokat html kódotés kinagyított képet jelenít meg leírással és egyéb információkkal.
Így a kép nagyításra kerül, anélkül, hogy az oldalt újra kellene tölteni a böngészőben. Ez nagyon kényelmes, ha részleges adatokat kell fogadnunk, vagy kis mennyiségű információt kell átvinnünk a szerverre.
Mindenki kedvenc jQuery-je rendelkezik getJSON() és parseJSON() függvényekkel, amelyek segítenek a formátummal való munkavégzésben ajax kéréseken keresztül.
Hogyan hozzunk létre JSON karakterláncokat?
A JSON-karakterláncok létrehozásának alapvető szabályai a következők:
- A JSON-karakterlánc értékek tömbjét és objektumot is tartalmaz (egy név/érték párokkal rendelkező asszociatív tömb).
- A tömböt szögletes zárójelek közé kell tenni, [ és ], tartalmazhat egy kómával elválasztott értékek listáját.
- A göndör bilinccsel burkolt objektumok ( és ) szintén tartalmaznak kómával elválasztott név/érték párokat.
- A név/érték párok a mező nevéből állnak (idézőjelben), amit kettőspont (:) követ, majd az adott mező értéke.
- Egy tömbben vagy objektumban az értékek a következők lehetnek:
- Numerikus (egész vagy tizedes, ponttal)
- Karakterláncok (kettős idézőjelbe foglalva)
- Logikai (igaz vagy hamis)
- Egyéb tömbök (szögletes zárójelben [ és ])
- Egyéb tárgyak (formázott karokba csomagolva ( és ))
- Nulla érték(nulla)
Fontos! Ha dupla idézőjeleket használ az értékekben, akkor ezeket egy fordított perjellel szüntesse meg: \". Más programozási nyelvekhez hasonlóan használhat hexadecimális kódolású karaktereket is.
Egy egyszerű példa a JSON-adatokra
A következő példa bemutatja, hogyan menthet el adatokat egy online áruház „kosarába” JSON formátum használatával:
( "orderID": 12345, "shopperName": "John Smith", "shopperEmail": " [e-mail védett]", "contents": [ ( "productID": 34, "productName": "SuperWidget", "quantity": 1 ), ( "productID": 56, "productName": "WonderWidget", "quantity": 3 ) ], "orderCompleted": igaz )
Bontsuk fel ezeket az adatokat darabonként:
- Az elején és a végén göndör íjakat ( és ) használunk, amelyek egyértelművé teszik, hogy ez egy tárgy.
- Az objektumon belül több név/érték pár található:
- "rendelésazonosító": 12345- orderId nevű mező és 12345 érték
- "shopperName": "John Smith"- shopperName nevű mező és értéke Kovács János
- " shopperEmail": "[e-mail védett] példa.com"- az előző mezőhöz hasonlóan itt is a vásárló e-mailje kerül tárolásra.
- "tartalom": [ ... ]- egy tartalom nevű mező, melynek értéke egy tömb.
- "rendelés befejezve": igaz- egy orderCompleted nevű mező, amelynek értéke igaz
- A tartalomtömbön belül két objektum található, amelyek a kosár tartalmát jelenítik meg. Minden termékobjektumnak három tulajdonsága van: termékazonosító, terméknév, mennyiség.
Végül, mivel a JSON megegyezik a JavaScript objektumaival, egyszerűen használhatja ezt a példát, és létrehozhat belőle JavaScript objektumot:
A JSON és az XML összehasonlítása
A legtöbb esetben a JSON-t az XML alternatívájaként fogja gondolni – legalábbis a webalkalmazásokon belül. Az Ajax koncepciója eredetileg az XML-t használta a szerver és a böngésző közötti kommunikációra, de az utóbbi években a JSON egyre népszerűbbé vált ajax adatok továbbítására.
Míg az XML egy kipróbált és tesztelt technológia, amelyet számos alkalmazás használ, a JSON formátum előnye, hogy kompaktabb, könnyebben írható és olvasható.
Íme a fenti JSON-példa, csak XML formátumban átírva:
Mint látható, többszörösen hosszabb, mint a JSON. Valójában ez a példa 1128 karakter hosszú, míg a JSON verzió csak 323 karakter hosszú. Az XML-verziót is nehezebb olvasni.
Természetesen nem lehet csak egy példa alapján megítélni, de még kis mennyiségű információ is kevesebb helyet foglal el JSON formátumban, mint XML-ben.
Hogyan dolgozhatok JSON-nal PHP-n és JS-en keresztül?
Tehát elérkeztünk a legérdekesebbhez - a JSON formátum gyakorlati oldalához. Először is tisztelegjünk a JavaScript előtt, majd meglátjuk, hogyan tudjuk a JSON-t PHP-n keresztül manipulálni.
JSON formátum létrehozása és olvasása JavaScript segítségével
Bár a JSON formátum egyszerű, a webalkalmazások fejlesztése során nehéz kézzel írni. Ezenkívül gyakran kell a JSON-karakterláncokat változókká konvertálnia, majd használnia kell őket a kódjában.
Szerencsére sok programozási nyelv biztosít eszközöket a JSON-karakterláncokkal való munkához. Aminek a fő gondolata:
Teremtésjson karakterláncok, néhány értéket tartalmazó változókkal kezdi, majd átadja azokat egy függvényen, amely az adatokat JSON-karakterláncsá alakítja.
Olvasásjson karakterláncok, ha bizonyos adatokat tartalmazó JSON-karakterlánccal kezdi, futtassa a karakterláncot egy függvényen, amely létrehozza az adatokat tartalmazó változókat.
Nézzük meg, hogyan történik ez a JavaScriptben.
Hozzon létre egy JSON-karakterláncot JavaScript-változóból
A JavaScript rendelkezik egy beépített metódussal, a JSON.stringify() , amely egy javascript-változót vesz fel, és a változó tartalmát reprezentáló json-karakterláncot ad vissza. Például használjuk a korábban létrehozott objektumot, alakítsuk át JSON karakterláncra.
Íme, mi fog megjelenni a képernyőn:
("orderID":12345,"shopperName":"John Smith","shopperEmail":" [e-mail védett]", "contents":[("productID":34,"productName":"SuperWidget","quantity":1), ("productID":56,"productName":"WonderWidget","quantity":3) ], "orderCompleted":true)
Vegye figyelembe, hogy a JSON.stringify() szóközök nélkül adja ki a JSON karakterláncokat. Nehezen olvasható, de kompaktabb, ami fontos adatátvitelkor.
Hozzon létre JavaScript-változót JSON-karakterláncból
A JSON-karakterláncok elemzésének többféle módja van, a legelfogadhatóbb és legbiztonságosabb a JSON.parse() metódus használata. JSON-karakterláncot vesz igénybe, és a JSON-adatokat tartalmazó JavaScript objektumot vagy tömböt ad vissza. Íme egy példa:
Itt létrehoztunk egy változót, a jsonStringet, amely tartalmazza a korábban megadott példákból származó JSON karakterláncot. Ezután átadtuk ezt a sort a JSON.parse() függvényen keresztül, hogy létrehozzunk egy JSON-adatokat tartalmazó objektumot, amelyet a kosár változóban tárolunk. Végül ellenőrizzük az adatok meglétét, és megjelenítünk néhány információt a modális figyelmeztető ablak segítségével.
A következő információk jelennek meg:
Valódi webes alkalmazásban a JavaScript-kódnak egy JSON-karakterláncot kell fogadnia válaszként a szervertől (AJAX-kérés elküldése után), majd elemeznie kell a karakterláncot, és megjelenítenie kell a kosár tartalmát a felhasználó számára.
JSON formátum létrehozása és olvasása PHP-vel
A PHP-hez hasonlóan a JavaScript-hez is vannak olyan funkciók, amelyek lehetővé teszik a változók JSON formátumba való konvertálását, és fordítva. Vessünk egy pillantást rájuk.
JSON-karakterlánc létrehozása PHP-változóból
A json_encode() egy PHP-változót vesz fel, és egy JSON-karakterláncot ad vissza, amely a változó adatait reprezentálja. Íme a PHP-ben írt "kosár" példa:
12345, "shopperName" => "John Smith", "shopperEmail" => " [e-mail védett]", "contents" => array(array("productID" => 34, "productName" => "SuperWidget", "quantity" => 1), array("productID" => 56, "productName" => " WonderWidget", "mennyiség" => 3)), "orderCompleted" => igaz); echo json_encode($cart); ?>
Ez a kód pontosan ugyanazt az eredményt adja, mint a JavaScript-példa – egy érvényes JSON-karakterlánc, amely a változók tartalmát reprezentálja:
("orderID":12345,"shopperName":"John Smith","shopperEmail":" [e-mail védett]","contents":[("productID":34,"productName":"SuperWidget","quantity":1),("productID":56,"productName":"WonderWidget","quantity":3) ]"orderCompleted":true)
Valójában a PHP-szkriptnek egy JSON-karakterláncot kell küldenie válaszként egy AJAX-kérésre, ahol a JavaScript a JSON.parse() segítségével alakítja át a karakterláncot változókká.
A json_encode() függvényben további paramétereket adhat meg, amelyek lehetővé teszik egyes karakterek hexadecimális alakra való konvertálását.
PHP-változó létrehozása JSON-karakterláncból
A fentiekhez hasonlóan létezik egy json_decode() függvény, amely lehetővé teszi a JSON karakterláncok dekódolását és a tartalom változókba helyezését.
shopperEmail. "
"; echo $cart->contents->productName . "
";
?>
A JavaScripthez hasonlóan ez a kód a következőket adja ki:
[e-mail védett] Wonder Widget
Alapértelmezés szerint a json_decode() a JSON-objektumokat PHP-objektumként adja vissza. A szokásos szintaxishoz hasonlóan a ->-t használjuk egy objektum tulajdonságainak eléréséhez.
Ha később asszociatív tömbként szeretné használni az adatokat, csak adja meg a true értéket második paraméterként a json_decode() függvénynek. Íme egy példa:
$kosár = json_decode($jsonString, igaz); echo $cart["shopperEmail"] . "
"; echo $cart["contents"]["productName"] . "
";
Ez ugyanazt a kimenetet eredményezi:
[e-mail védett] Wonder Widget
Ezenkívül további argumentumok is átadhatók a json_decode () függvénynek, hogy meghatározzák a nagy számok feldolgozását és a rekurziót.
Összefoglalva a JSON formátumról
Ha Ajax technológiával kíván webalkalmazást létrehozni, feltétlenül használja a JSON formátumot a szerver és a böngésző közötti adatcseréhez.
A JavaScript Object Notation (JSON) egy szabványos szövegformátum a JavaScript objektum szintaxisán alapuló strukturált adatok megjelenítésére. Általában adatátvitelre használják webalkalmazásokban (például bizonyos adatok elküldésére a szerverről egy kliensre, hogy megjelenjenek egy weboldalon, vagy fordítva). Elég gyakran találkozhat ezzel, ezért ebben a cikkben mindent megadunk, amire szüksége van a JSON-val való munkához JavaScript használatával, beleértve a JSON elemzését, hogy hozzáférhessen a benne lévő adatokhoz, és létrehozhassa a JSON-t.
Nem, tényleg, mi az a JSON?
Be fogjuk tölteni az oldalunkra, és néhány remek DOM-manipulációval megjelenítjük, például:
JSON beszerzése
A JSON beszerzéséhez az XMLHttpRequest nevű API-t használjuk (gyakran hívják XHR). Ez egy nagyon hasznos JavaScript-objektum, amely lehetővé teszi számunkra, hogy hálózati kéréseket indítsunk az erőforrások (például képek, szövegek, JSON-fájlok, akár HTML-részletek) lekérésére a szerverről JavaScript-en keresztül, ami azt jelenti, hogy a tartalom kis részeit frissíthetjük anélkül, hogy újra be kellene töltenünk a teljes tartalmat. oldalon. Ez jobban reagáló weboldalakat eredményezett, és izgalmasan hangzik, de sajnos túlmutat e cikk hatókörén, hogy ezt sokkal részletesebben megtanítsa.
- Először is egy változóban tároljuk a lekérni kívánt JSON URL-t. Adja hozzá a következő JavaScript-kódot: var requestURL = "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json";
- Kérelem létrehozásához létre kell hoznunk egy új kérelem objektum példányt az XMLHttpRequest konstruktorból a kulcsszóúj. Adja hozzá az utolsó sort alább: var request = new XMLHttpRequest();
- Most új kérést kell nyitnunk a . Adja hozzá a következő sort: request.open("GET", requestURL);
Ehhez legalább két paraméterre van szükség - vannak mások Elérhető opciók. Ehhez csak kettőre van szükségünk egyszerű példa:
- A hálózati kérés indításakor használandó HTTP-módszer. Ebben az esetben rendben van, mivel csak néhány egyszerű adatot nyerünk ki.
- A kérelem URL-je a korábban mentett JSON-fájl URL-je.
- Ezután adjuk hozzá a következő két sort: itt JSON-ra állítjuk, hogy az XHR tudja, hogy a szerver visszaadja a JSON-t, és azt a színfalak mögött JavaScript objektummá kell konvertálni. Ezután elküldjük a kérést a következő metódussal: request.responseType = "json"; kérés elküldése();
- Ennek a szakasznak az utolsó része a kiszolgálótól érkező visszatérési válasz megvárása, majd annak kezelése. Adja hozzá a következő kódot az előző kód alá: request.onload = function() ( var superHeroes = request.response; populateHeader(superHeroes); showHeroes(superHeroes); )
Itt tároljuk a kérésünkre adott választ (elérhető a tulajdonságban) a superHeroes változóban; ez a változó mostantól JSON-alapú JavaScript objektumot fog tartalmazni! Ezután ezt az objektumot átadjuk két függvényhívásnak – az első kitölti
A kódot egy eseménykezelőbe csomagoltuk, amely akkor aktiválódik, amikor a betöltési esemény a kérelem objektumon elindul (lásd ) – ez azért van, mert a betöltési esemény akkor indul el, amikor a válasz sikeresen visszatér; Ezzel a módszerrel biztosítható, hogy a request.response biztosan elérhető legyen, amikor megpróbálunk valamit kezdeni vele.
Fejléc befejezése
Most kivontuk a JSON-adatokat, és JavaScript objektummá alakítottuk, használjuk ki a két fent hivatkozott függvény megírásával. Először is adja hozzá a következő függvénydefiníciót az előző kód alá:
Függvény populateHeader(jsonObj) ( var myH1 = document.createElement("h1"); myH1.textContent = jsonObj["squadName"]; header.appendChild(myH1); var myPara = document.createElement("p"); myPara. textContent = "Szülőváros: " + jsonObj["homeTown"] + " // Létrehozva: " + jsonObj["formált"]; header.appendChild(myPara); )
A jsonObj paramétert azért neveztük el, hogy emlékeztessük magunkat arra, hogy ez a JavaScript-objektum a JSON-ból származik. Itt először létrehozunk egy elemet
-val, állítsa egyenlőnek az objektum squadName tulajdonságával, majd adja hozzá a fejléchez a -val. Ezután egy nagyon hasonló műveletet hajtunk végre egy bekezdésen: létrehozzuk, beállítjuk a szöveg tartalmát, és hozzáadjuk a címsorhoz. Az egyetlen különbség az, hogy a szövege egy összefűzött karakterláncként van megadva, amely tartalmazza az objektum homeTown és formált tulajdonságait is.
Hős információs kártyák készítése
Majd adjon hozzá következő funkció a szuperhőskártyákat létrehozó és megjelenítő kód alján:
függvény showHeroes(jsonObj) ( var heroes = jsonObj["tagok"]; for (var i = 0; i< heroes.length; i++) { var myArticle = document.createElement("article"); var myH2 = document.createElement("h2"); var myPara1 = document.createElement("p"); var myPara2 = document.createElement("p"); var myPara3 = document.createElement("p"); var myList = document.createElement("ul"); myH2.textContent = heroes[i].name; myPara1.textContent = "Secret identity: " + heroes[i].secretIdentity; myPara2.textContent = "Age: " + heroes[i].age; myPara3.textContent = "Superpowers:"; var superPowers = heroes[i].powers; for (var j = 0; j < superPowers.length; j++) { var listItem = document.createElement("li"); listItem.textContent = superPowers[j]; myList.appendChild(listItem); } myArticle.appendChild(myH2); myArticle.appendChild(myPara1); myArticle.appendChild(myPara2); myArticle.appendChild(myPara3); myArticle.appendChild(myList); section.appendChild(myArticle); } }
Először is tároljuk a JavaScript objektum Member tulajdonságát egy új változóban. Ez a tömb több objektumot tartalmaz, amelyek minden hősről tartalmaznak információkat.
Ezután a tömb minden egyes objektumát használjuk. Mindegyikük esetében:
- Hozzunk létre néhány új elemet:
, , három
És
- .
- Telepítés
hogy tartalmazza az aktuális hős nevét.
- Három bekezdést kitöltünk a titkos személyazonosságunkkal , életkorunkkal és egy sorral, amelyen a "Superpowers:" felirat szerepel, hogy információkat vigyünk be a listába.
- A powers tulajdonságot egy másik új változóban tároljuk, a superPowers néven – ez egy tömböt tartalmaz, amely felsorolja az aktuális hős szuperképességeit.
- Egy másik for ciklust használunk az aktuális hős szuperképességeihez – mindegyikhez létrehozunk egy elemet
- , tedd bele a szuperképességeket, majd tedd bele a listItem elemet
- (myList) az appendChild() -vel.
- Az utolsó dolog, amit teszünk, az, hogy hozzáadjuk
,
És
- belül
(myCikk), majd add hozzá ban ben . A dolgok hozzáadásának sorrendje fontos, mivel ebben a sorrendben jelennek meg a HTML-ben.
jegyzet. Ha problémába ütközik a JavaScript objektumok eléréséhez használt pont/zárójel jelölés követése, segíthet a superheroes.json fájl megnyitása egy másik lapon vagy szöveg szerkesztőés hivatkozzon rá, amikor megnézi JavaScriptünket. Olvassa el cikkünket is további információ pontok és zárójelek jelöléséről.
Konvertálás az objektumok és szöveg között
A fenti példa egyszerű volt a JavaScript-objektum elérését illetően, mivel egy XHR-kérést tettünk a JSON-válasz közvetlen JavaScript objektummá konvertálására.
A JSON (JavaScript Object Notation) egy adatátviteli formátum. Ahogy a neve is sugallja, a formátum a JavaScript programozási nyelven alapul, de más nyelveken is elérhető (Python, Ruby, PHP, Java).
A JSON a .json kiterjesztést használja. Ha másban használják fájlformátumok(pl. .html) A JSON-karakterlánc idézőjelben van, vagy változóhoz van rendelve. Ez a formátum könnyen átvihető a webszerver és a kliens vagy böngésző között.
Könnyű és könnyen érthető, a JSON az XML nagyszerű alternatívája.
Ez az útmutató bemutatja az előnyöket, lehetőségeket, átfogó szerkezetés JSON szintaxis.
JSON szintaxis és szerkezet
A JSON-objektum kulcsérték formájában van, és általában kapcsos zárójelben van írva. A JSON használatakor az összes objektum .json fájlban tárolódik, de különálló objektumokként is létezhetnek egy program kontextusában.
A JSON objektum így néz ki:
"first_name" : "János",
"last_name" : "Smith",
"location" : "London",
"online": igaz
"követők": 987
Ez egy nagyon egyszerű példa. Egy JSON-objektum több karakterláncot is tartalmazhat.
Mint látható, az objektum kulcs-érték párokból áll, amelyek kapcsos zárójelekbe vannak zárva. A JSON-ban lévő adatok többsége objektumként van írva.
A kulcs és az érték közé kettőspont kerül. Minden pár után vesszőt kell tenni. Az eredmény:
"kulcs" : "érték", "kulcs" : "érték", "kulcs" : "érték"
A JSON kulcsa a bal oldalon található. A kulcsot idézőjelek közé kell tenni. Bármely érvényes karakterlánc használható kulcsként. Egy objektumon belül minden kulcsnak egyedinek kell lennie. A kulcs tartalmazhat szóközt ("keresztnév"), de programozáskor problémák adódhatnak az ilyen kulcs elérésekor. Ezért szóköz helyett jobb az aláhúzás („first_name”) használata.
A JSON-értékek az oszlop jobb oldalán találhatók. Bármilyen egyszerű adattípus használható értékként:
- Húrok
- Számok
- Objektumok
- Tömbök
- Logikai adatok (igaz vagy hamis)
Az értékek összetett adattípusokkal is ábrázolhatók (például objektumok vagy JSON-tömbök).
A JSON támogatja a fent felsorolt adattípusok mindegyikének egyedi szintaxisát: ha az érték karakterlánc, akkor idézőjelek lesznek, ha pedig számok, akkor nem.
A .json fájlokban lévő adatok általában egy oszlopba íródnak, de a JSON egy sorba is írható:
( "keresztnév" : "János", "last_name": "Smith", "online" : igaz, )
A JSON-adatok általában így íródnak egy másik típusú fájlba.
Ha JSON-adatokat ír egy oszlopba, javítja a fájl olvashatóságát (különösen, ha sok adat van a fájlban). A JSON figyelmen kívül hagyja az oszlopok közötti szóközöket, így ezek segítségével feloszthatja az adatokat ember által olvasható számú oszlopra.
"first_name" : "János",
"last_name" : "Smith",
"online": igaz
Vegye figyelembe, hogy a JSON-objektumok nagyon hasonlítanak a JavaScript-objektumokhoz, de nem azonos formátumúak. Például JavaScriptben használhat függvényeket, JSON-ban azonban nem.
A JSON fő előnye, hogy az ilyen formátumú adatokat számos népszerű programozási nyelv támogatja, így azok gyorsan átvihetők.
Most már ismeri az alapvető JSON-szintaxist. A JSON-fájlok azonban összetett, hierarchikus szerkezetűek lehetnek, amelyek beágyazott tömböket és objektumokat tartalmaznak.
Összetett típusok a JSON-ban
A JSON tárolhat beágyazott objektumokat és tömböket, amelyek a hozzájuk rendelt kulcs értékeként kerülnek átadásra.
beágyazott objektumok
Alább talál egy példát - a users.json fájlt, amely a felhasználók adatait tartalmazza. Minden felhasználó számára
("john", "jesse", "drew", "jamie") értékként egy beágyazott objektum kerül átadásra, amely viszont szintén kulcsokból és értékekből áll.
jegyzet: Az első beágyazott JSON-objektum pirossal van kiemelve.
"János" :(
"felhasználónév" : "János",
"location" : "London",
"online": igaz
"követők": 987
"Jesse" :(
"felhasználónév" : "Jesse",
"location" : "Washington",
"online": hamis
"követők": 432
"rajzolt" :(
"felhasználónév" : "Drew",
"hely" : "Párizs",
"online": hamis
"követők": 321
"Jamie" :(
"felhasználónév" : "Jamie",
"helyszín": "Berlin",
"online": igaz
"követők": 654
Vegye figyelembe, hogy a göndör kapcsos zárójeleket a beágyazott és a fő objektumok is használják. A vesszőket a beágyazott objektumok ugyanúgy használják, mint a közönségesek.
Beágyazott tömbök
Az adatok beágyazhatók a JSON-ba JavaScript-tömbök segítségével, amelyek értékként kerülnek átadásra. A JavaScript szögletes zárójeleket () használ a tömb elején és végén. A tömb olyan rendezett adatgyűjtemény, amely különféle típusú adatokat tartalmazhat.
Az átvitelhez tömböt használnak egy nagy szám csoportosítható adatok. Például próbáljuk meg rögzíteni a felhasználói adatokat.
{
"first_name" : "János",
"last_name" : "Smith",
"location" : "London",
"webhelyek" : [
"description" : "munka",
"URL" : "https://www.johnsmithsite.com/"
},
{
"desciption" : "oktatóanyagok",
"URL" : "https://www.johnsmithsite.com/tutorials"
"közösségi média" : [
"description" : "twitter",
"link" : "https://twitter.com/johnsmith"
"description" : "facebook",
"link" : "https://www.facebook.com/johnsmith"
"description" : "github",
"link" : "https://github.com/johnsmith"
A "websites" és a "social_media" kulcsok értékként tömböket kapnak, amelyek szögletes zárójelben vannak.
A beágyazott tömbökkel és objektumokkal összetett adathierarchiát hozhat létre.
JSON vagy XML?
Az XML (eXtensible Markup Language) lehetővé teszi az adatok tárolását olyan formában, amely kényelmes az emberi és gépi észlelés számára. Az XML formátumot számos programozási nyelv támogatja.
Az XML-ben és a JSON-ban sok a közös. Az XML azonban sokkal több szöveget igényel, ezért a fájlok nagyobbak és nehezebben olvashatók és írhatók. Sőt, az XML feldolgozása csak XML értelmezővel történik, míg a JSON egy egyszerű funkcióval. A JSON-nal ellentétben az XML nem tud tömböket tárolni.
Hasonlítsunk össze két fájlt: ugyanazokat az adatokat tartalmazzák, de az első XML formátumban, a második pedig JSON formátumban.
users.xml
users.json
("felhasználók": [
("felhasználónév": "John", "location": "London"),
("felhasználónév": "Jesse", "location": "Washington"),
("felhasználónév": "Drew", "location": "Párizs"),
("felhasználónév": "JamieMantisShrimp", "helyszín": "Berlin")
A JSON egy nagyon kompakt formátum, és nem igényel annyi címkét, mint az XML. Ezenkívül az XML a JSON-nal ellentétben nem támogatja a tömböket.
Ha ismeri a HTML-t, ezt észre fogja venni XML formátum nagyon hasonlít rá (különösen a címkékre). A JSON egyszerűbb, kevesebb szöveget igényel, és könnyebben használható például AJAX alkalmazásokban.
Természetesen a formátumot az alkalmazás igényei szerint kell kiválasztani.
JSON-eszközök
A JSON-t általában a JavaScriptben használják, de a formátumot széles körben használják más programozási nyelvekben.
További információ a JSON-kompatibilitásról és -kezelésről a projekt webhelyén és a jQuery könyvtárban található.
Ritka a semmiből JSON-t írni. Az adatok általában forrásokból töltődnek be, vagy JSON-ba konvertálódnak. A CSV vagy tabulátorral tagolt adatokat JSON formátumba konvertálhatja a következővel nyitott hangszerÚr. adatkonvertáló. Az XML JSON formátumba konvertálásához és fordítva használja az utilities-online.info fájlt. Ha automata szerszámokkal dolgozik, feltétlenül ellenőrizze az eredményt.
A JSON-fájlok (beleértve a konvertált adatokat is) a JSONLint szolgáltatással ellenőrizhetők. A JSON webfejlesztési környezetben történő teszteléséhez tekintse meg a JSFiddle webhelyet.
Következtetés
A JSON egy egyszerű és könnyű adatformátum. A JSON-fájlok könnyen átvihetők, tárolhatók és használhatók.
Manapság a JSON-t gyakran használják az API-kban.
Biztosan hallott már a JSON-ról. Mi az? Mire képes és hogyan használható?
Ebben a leckében bemutatjuk a JSON alapjait, és kitérünk a következő pontokra:
- Mi az a JSON?
- Mire használható a JSON?
- Hogyan lehet JSON karakterláncot létrehozni?
- Egy egyszerű JSON karakterlánc példa.
- Hasonlítsuk össze a JSON-t és az XML-t.
- Hogyan dolgozhatok JSON-nal JavaScriptben és PHP-ben?
Mi az a JSON?
A JSON egy egyszerű, szövegalapú módszer a strukturált adatok tárolására és kommunikálására. Egy egyszerű szintaxissal egyszerűen tárolhat bármit egyetlen számtól a karakterláncokig, tömbökig és objektumokig egyszerű szövegben. Tömböket és objektumokat is összekapcsolhat összetett adatstruktúrák létrehozásához.
Miután létrehozta a JSON-karakterláncot, egyszerűen elküldheti egy másik alkalmazásba vagy a hálózat egy másik helyére, mert egyszerű szöveg.
A JSON a következő előnyökkel rendelkezik:
- Kompakt.
- Mondatai könnyen olvashatók és összeállíthatók ember és számítógép által egyaránt.
- Könnyen átalakítható adatstruktúrává a legtöbb programozási nyelvhez (számok, karakterláncok, logikai értékek, tömbök stb.)
- Számos programozási nyelv rendelkezik funkciókkal és könyvtárakkal a JSON-struktúrák olvasásához és létrehozásához.
A JSON név a JavaScript Object Notation (JavaScript objektumok reprezentációja) rövidítése. Ahogy a név is mutatja, az objektumok definiálási módján (nagyon hasonló a más nyelvek asszociatív tömbök létrehozásához) és tömbökön alapul.
Mire használható a JSON?
A JSON legáltalánosabb használata az adatok küldése a szerverről a böngészőbe. A JSON-adatokat általában az AJAX segítségével szállítják, amely lehetővé teszi a böngésző és a szerver számára, hogy az oldal újratöltése nélkül cseréljenek adatot.
- A felhasználó rákattint egy termék bélyegképére az online áruházban.
- A böngészőben futó JavaScript AJAX kérést küld a szerveren futó PHP szkriptnek, átadva a kiválasztott termék azonosítóját.
- A PHP szkript lekéri a termék nevét, leírását, árat és egyéb információkat az adatbázisból. Ezután JSON-karakterláncot állít össze az adatokból, és elküldi a böngészőnek.
- A böngészőben futó JavaScript fogadja a JSON karakterláncot, dekódolja azt, és megjeleníti a termékinformációkat az oldalon a felhasználó számára.
A JSON segítségével adatokat küldhet a böngészőből a kiszolgálónak a JSON karakterlánc paraméterként történő átadásával a GET vagy POST kérésekben. De ez a módszer kevésbé elterjedt, mivel az adatok AJAX kéréseken keresztül történő továbbítása egyszerűsíthető. Például a termékazonosító szerepelhet benne URL-cím GET kérés részeként.
A jQuery könyvtár számos módszerrel rendelkezik, például a getJSON() és a parseJSON() , amelyek megkönnyítik az adatok lekérését JSON használatával AJAX kéréseken keresztül.
Hogyan lehet JSON karakterláncot létrehozni?
Van néhány alapvető szabály a JSON-karakterlánc létrehozásához:
- A JSON karakterlánc vagy értékek tömbjét vagy objektumot (név/érték párok asszociatív tömbje) tartalmaz.
- sor szögletes zárójelben ([ és ]) van, és vesszővel elválasztott értéklistát tartalmaz.
- Egy tárgy kapcsos zárójelek közé (( és )) van zárva, és a név/érték párok vesszővel elválasztott listáját tartalmazza.
- név/érték pár A mező neve kettős idézőjelbe van zárva, amelyet kettőspont (:) követ és a mező értéke.
- Jelentése egy tömbben vagy objektumban lehet:
- Szám (egész vagy lebegőpontos)
- Karakterlánc (idézőjelben)
- Logikai érték (igaz vagy hamis)
- Egy másik tömb (szögletes zárójelben)
- Egy másik tárgy (göndör kapcsos zárójelbe zárva)
- null érték
Ha dupla idézőjeleket szeretne beilleszteni egy karakterláncba, fordított perjelet kell használnia: \" . Sok programozási nyelvhez hasonlóan itt is elhelyezhet vezérlőkaraktereket és hexadecimális kódokat egy karakterláncban úgy, hogy egy fordított perjel előzi meg őket. A részletekért lásd a JSON webhelyet.
Egyszerű JSON karakterlánc példa
A következő példa egy JSON formátumú fizetésre:
( "orderID": 12345, "shopperName": "Vanya Ivanov", "shopperEmail": " [e-mail védett]", "contents": [ ( "productID": 34, "productName": "super product", "quantity": 1 ), ( "productID": 56, "productName": "Miracle product", "quantity": 3 ) ], "orderCompleted": igaz )
Nézzük meg részletesen a sort:
- Egy objektumot hozunk létre göndör kapcsos zárójelekkel (( és )).
- Az objektumban több név/érték pár található: "orderID": 12345 tulajdonság "orderId" névvel és egész érték 12345 "shopperName": "Vanya Ivanov" tulajdonság "shopperName" névvel és "Vanya Ivanov" "shopperEmail" karakterlánc értékkel : " [e-mail védett]" "shopperEmail" nevű tulajdonság karakterlánc értékkel " [e-mail védett]" "contents": [ ... ] "contents" nevű tulajdonság, amelynek értéke egy tömb "orderCompleted": true "orderCompleted" nevű tulajdonság igaz logikai értékkel
- A "tartalom" tömbben 2 objektum található, amelyek a rendelés sorait képviselik. Minden objektum 3 tulajdonságot tartalmaz: productID , productName és mennyiség .
Egyébként, mivel a JSON JavaScript objektumok deklarálásán alapul, a fenti JSON karakterláncot gyorsan és egyszerűen JavaScript objektummá alakíthatja:
A JSON és az XML összehasonlítása
A JSON-t sok szempontból az XML alternatívájaként tekintheti, legalábbis a webalkalmazások területén. Az AJAX koncepciója eredetileg az XML használatán alapult a szerver és a böngésző közötti adatátvitelre. Az utóbbi években azonban a JSON egyre népszerűbb lett az AJAX adatátvitel terén.
Míg az XML bevált technológia, amelyet számos alkalmazásban használnak, a JSON előnye, hogy kompaktabb és könnyebben felismerhető adatformátum.
Így nézne ki a fenti XML objektum példa:
Az XML verzió lényegesen nagyobb. Valójában 1128 karakter hosszú, míg a JSON-változat csak 323 karakter hosszú. Az XML verziót is nehéz megérteni.
Természetesen ez egy radikális példa. És lehetőség van egy kompaktabb XML bejegyzés létrehozására. De még ez is jelentősen hosszabb lesz, mint a JSON megfelelője.
JSON-karakterlánc használata JavaScriptben
A JSON egyszerű formátumú, de a JSON karakterlánc manuális létrehozása meglehetősen fárasztó. Ezenkívül gyakran kell venni egy JSON karakterláncot, és annak tartalmát kódban használható változóvá kell konvertálni.
A legtöbb programozási nyelv rendelkezik olyan eszközökkel, amelyekkel könnyen konvertálhatók a változók JSON-karakterláncokká és fordítva.
Hozzon létre egy JSON-karakterláncot egy változóból
A JavaScript rendelkezik egy beépített JSON.stringify() metódussal, amely változót vesz fel, és a tartalmát reprezentáló JSON-karakterláncot ad vissza. Például hozzunk létre egy JavaScript objektumot, amely tartalmazza a példánk rendelési adatait, majd hozzunk létre belőle egy JSON-karakterláncot:
Ez a kód a következőket adja:
Vegye figyelembe, hogy a JSON.stringify() metódus szóközök nélküli JSON-karakterláncot ad vissza. Nehezebben olvasható, de hálózaton keresztüli átvitelhez kompaktabb.
A JSON-karakterláncok JavaScriptben történő elemzése többféleképpen lehetséges, de a legbiztonságosabb és legmegbízhatóbb a beépített JSON.parse() metódus használata. JSON-karakterláncot vesz igénybe, és visszaad egy JavaScript objektumot vagy tömböt, amely tartalmazza az adatokat. Például:
Létrehoztunk egy jsonString változót, amely tartalmazza a rendelési példánk JSON-karakterláncát. Ezután ezt a karakterláncot átadjuk a JSON.parse() metódusnak, amely létrehoz egy objektumot, amely tartalmazza a JSON-adatokat, és eltárolja azokat a cart változóban. Nincs más hátra, mint a tesztelés a shopperEmail objektum tulajdonságainak és a contents tömb productName-jének kinyomtatásával.
Ennek eredményeként a következő kimenetet kapjuk:
Valódi alkalmazásban a JavaScript-kód JSON-karakterláncként kapja meg a rendelést egy AJAX-válaszban a kiszolgáló szkriptjétől, továbbítja a karakterláncot a JSON.parse() metódusnak, majd az adatok segítségével megjeleníti a felhasználó oldalán.
A JSON.stringify() és a JSON.parse() más képességekkel is rendelkezik, például a visszahívási függvények használatával bizonyos adatok egyéni konvertálására. Ezek a beállítások nagyon hasznosak különféle adatok érvényes JavaScript objektumokká konvertálásához.
JSON-karakterlánc használata PHP-ben
A PHP a JavaScripthez hasonlóan beépített funkciókkal rendelkezik a JSON karakterláncokkal való munkavégzéshez.
Hozzon létre egy JSON-karakterláncot egy PHP-változóból
A json_encode() függvény egy PHP-változót vesz fel, és egy JSON-karakterláncot ad vissza, amely a változó tartalmát reprezentálja. Íme a PHP-ben írt rendelési példa:
12345, "shopperName" => "Ványa Ivanov", "shopperEmail" => " [e-mail védett]", "contents" => array(array("productID" => 34, "productName" => "super Product", "quantity" => 1), array("productID" => 56, "productName" => "csodatermék", "mennyiség" => 3)), "orderCompleted" => igaz); echo json_encode($cart); ?>
Adott kód pontosan ugyanazt a JSON-karakterláncot adja vissza, mint a JavaScript-példában:
("orderID":12345,"shopperName":"Vanya Ivanov","shopperEmail":" [e-mail védett]","contents":[("productID":34,"productName":"szuper termék","mennyiség":1),("termékazonosító":56,"terméknév":"csodatermék","mennyiség": 3)]"orderCompleted":true)
Egy valós alkalmazásban az Ön PHP szkript elküldöm adott sor A JSON a böngészőnek adott AJAX-válasz részeként, ahol a JavaScript-kód a JSON.parse() metódus segítségével alakítja vissza változóvá a felhasználó oldalán való megjelenítéshez.
A json_encode() függvény második argumentumaként különféle zászlókat adhat át. Segítségükkel megváltoztathatja a változók tartalmának JSON-karakterláncba kódolásának alapelveit.
Hozzon létre egy változót egy JSON-karakterláncból
A json_decode() metódus a JSON-karakterlánc PHP-változóvá alakítására szolgál. Cseréljük le a JavaScript példánkat a JSON.parse() metódussal PHP kóddal:
shopperEmail. "
"; echo $cart->contents->productName . "
";
?>
Ami a JavaScriptet illeti, ez a kód a következőket produkálja:
[e-mail védett] csodaszerek
Alapértelmezés szerint a json_decode() függvény a JSON-objektumokat PHP-objektumként adja vissza. Vannak stdClass osztályú általános PHP objektumok. Ezért használjuk a ->-t az objektum tulajdonságainak eléréséhez a fenti példában.
Ha egy társított PHP-tömb formájában van szüksége egy JSON-objektumra, akkor a true értéket második argumentumként kell átadnia a json_decode() függvénynek. Például:
$kosár = json_decode($jsonString, igaz); echo $cart["shopperEmail"] . "
"; echo $cart["contents"]["productName"] . "
";
Ez a kód ugyanazt a kimenetet adja:
[e-mail védett] csodaszerek
Más argumentumokat is átadhat a json_decode() függvénynek a rekurzió mélységének és a nagy egész számok kezelésének meghatározásához.
Következtetés
Míg a JSON könnyen érthető és használható, nagyon hasznos és rugalmas eszköz az alkalmazások és számítógépek közötti adatátvitelhez, különösen AJAX használatakor. Ha egy AJAX alkalmazás fejlesztését tervezi, akkor kétségtelen, hogy a JSON lesz a legfontosabb eszköz a műhelyében.
