Mam ten plik JSON, który wygenerowałem na serwerze, który chcę udostępnić na kliencie, gdy strona jest widoczna. Zasadniczo chcę osiągnąć:
Mam następujący tag zadeklarowany w moim dokumencie HTML:
<script id="test" type="application/json" src="http://myresources/stuf.json">
Plik, do którego odnosi się jego źródło, zawiera dane JSON. Jak widziałem, dane zostały pobrane, tak jak to się dzieje ze skryptami.
Jak mogę uzyskać do niego dostęp w JavaScript? Próbowałem uzyskać dostęp do tagu skryptu, z jQuery i bez niego, używając wielu metod, aby spróbować uzyskać moje dane JSON, ale jakoś to nie działa. Uzyskanie innerHTML
tego zadziałałoby, gdyby dane json zostały zapisane w skrypcie. Które nie było i nie jest tym, co próbuję osiągnąć.
Zdalne żądanie JSON po załadowaniu strony również nie jest opcją, jeśli chcesz to zasugerować.
źródło
<script>
tag lub przez AJAX, nadal będziesz musiał czekać na zakończenie dodatkowego żądania HTTP. Przeglądarka nie pozwoli ci odczytać zawartości skryptu, jeśli pobierzesz go z atrybutem „src”, więc jedyną alternatywą jest wysłanie żądania AJAX.<script src=""></script>
? Obaj będą wykonywać wywołania GET na Twoim serwerze.Odpowiedzi:
Nie możesz tak załadować JSON, przepraszam.
Wiem, że myślisz "dlaczego nie mogę po prostu użyć
src
tutaj? Widziałem takie rzeczy ...":<script id="myJson" type="application/json"> { name: 'Foo' } </script> <script type="text/javascript"> $(function() { var x = JSON.parse($('#myJson').html()); alert(x.name); //Foo }); </script>
… cóż, mówiąc prościej, był to tylko znacznik skryptu, który był „nadużywany” jako posiadacz danych. Możesz to zrobić z różnymi rodzajami danych. Na przykład wiele mechanizmów tworzenia szablonów wykorzystuje tagi skryptów do przechowywania szablonów .
Masz krótką listę opcji ładowania JSON ze zdalnego pliku:
$.get('your.json')
lub innej takiej metody AJAX.Punkt końcowy:
... to nie ma sensu. Różnica między żądaniem AJAX a żądaniem wysłanym przez przeglądarkę podczas przetwarzania Twojego
<script src="">
to w zasadzie nic. Oboje będą wykonywać GET na zasobie. HTTP nie dba o to, czy jest to zrobione z powodu tagu skryptu lub wywołania AJAX, podobnie jak twój serwer.źródło
<script>
tagu jest możliwe, myślę, że wybrałbym tę trasę.Innym rozwiązaniem byłoby wykorzystanie języka skryptowego po stronie serwera i po prostu dołączenie wbudowanej biblioteki json-data. Oto przykład wykorzystujący PHP:
<script id="data" type="application/json"><?php include('stuff.json'); ?></script> <script> var jsonData = JSON.parse(document.getElementById('data').textContent) </script>
Powyższy przykład używa dodatkowego tagu skryptu z typem
application/json
. Jeszcze prostszym rozwiązaniem jest dołączenie JSON bezpośrednio do JavaScript:<script>var jsonData = <?php include('stuff.json');?>;</script>
Zaletą rozwiązania z dodatkowym tagiem jest to, że kod JavaScript i dane JSON są oddzielone od siebie.
źródło
Wygląda na to, że nie jest to możliwe lub przynajmniej nie jest obsługiwane.
Ze specyfikacji HTML5 :
źródło
Chociaż obecnie nie jest to możliwe w przypadku
script
tagu, jest to możliwe wiframe
przypadku tagu z tej samej domeny.<iframe id="mySpecialId" src="/my/link/to/some.json" onload="(()=>{if(!window.jsonData){window.jsonData={}}try{window.jsonData[this.id]=JSON.parse(this.contentWindow.document.body.textContent.trim())}catch(e){console.warn(e)}this.remove();})();" onerror="((err)=>console.warn(err))();" style="display: none;" ></iframe>
Aby skorzystać z powyższym, po prostu zastąpić
id
isrc
atrybut z tym, co trzeba.id
(Które będziemy zakładać w tej sytuacji jest równamySpecialId
) będzie używany do przechowywania danych wwindow.jsonData["mySpecialId"]
.Innymi słowy, dla każdego elementu iframe, który ma skrypt
id
i używaonload
skryptu, dane te będą synchronicznie ładowane dowindow.jsonData
obiektu podid
określonym.Zrobiłem to dla przyjemności i żeby pokazać, że jest to „możliwe”, ale nie polecam tego używać.
Oto alternatywa, która zamiast tego używa wywołania zwrotnego.
<script> function someCallback(data){ /** do something with data */ console.log(data); } function jsonOnLoad(callback){ const raw = this.contentWindow.document.body.textContent.trim(); try { const data = JSON.parse(raw); /** do something with data */ callback(data); }catch(e){ console.warn(e.message); } this.remove(); } </script> <!-- I frame with src pointing to json file on server, onload we apply "this" to have the iframe context, display none as we don't want to show the iframe --> <iframe src="your/link/to/some.json" onload="jsonOnLoad.apply(this, someCallback)" style="display: none;"></iframe>
Przetestowany w chromie i powinien działać w przeglądarce Firefox. Nie mam pewności co do przeglądarki IE lub Safari.
źródło
Zgadzam się z Benem. Nie można załadować / zaimportować prostego pliku JSON.
Ale jeśli absolutnie chcesz to zrobić i masz elastyczność w aktualizowaniu pliku json, możesz
my-json.js
var myJSON = { id: "12ws", name: "smith" }
index.html
<head> <script src="my-json.js"></script> </head> <body onload="document.getElementById('json-holder').innerHTML = JSON.stringify(myJSON);"> <div id="json-holder"></div> </body>
źródło
Sprawdź odpowiedź: https://stackoverflow.com/a/7346598/1764509
$.getJSON("test.json", function(json) { console.log(json); // this will show the info it in firebug console });
źródło
Jeśli chcesz załadować JSON z innej domeny: http://en.wikipedia.org/wiki/JSONP
Pamiętaj jednak o potencjalnych atakach XSSI: https://www.scip.ch/en/?labs.20160414
Jeśli jest to ta sama domena, po prostu użyj Ajax.
źródło
umieść coś takiego w swoim pliku skryptu
json-content.js
var mainjson = { your json data}
następnie wywołaj go z tagu script
<script src="json-content.js"></script>
następnie możesz go użyć w następnym skrypcie
<script> console.log(mainjson) </script>
źródło
Inna alternatywa dla użycia dokładnego json w javascript. Ponieważ jest to notacja obiektowa JavaScript, możesz po prostu utworzyć obiekt bezpośrednio z notacją JSON. Jeśli przechowujesz to w pliku .js, możesz użyć tego obiektu w swojej aplikacji. Była to przydatna opcja, gdy miałem statyczne dane json, które chciałem przechowywać w pliku oddzielnie od reszty mojej aplikacji.
//Just hard code json directly within JS //here I create an object CLC that represents the json! $scope.CLC = { "ContentLayouts": [ { "ContentLayoutID": 1, "ContentLayoutTitle": "Right", "ContentLayoutImageUrl": "/Wasabi/Common/gfx/layout/right.png", "ContentLayoutIndex": 0, "IsDefault": true }, { "ContentLayoutID": 2, "ContentLayoutTitle": "Bottom", "ContentLayoutImageUrl": "/Wasabi/Common/gfx/layout/bottom.png", "ContentLayoutIndex": 1, "IsDefault": false }, { "ContentLayoutID": 3, "ContentLayoutTitle": "Top", "ContentLayoutImageUrl": "/Wasabi/Common/gfx/layout/top.png", "ContentLayoutIndex": 2, "IsDefault": false } ] };
źródło