HTML / Javascript: come accedere ai dati JSON caricati in un tag script con src set

Ho questo file JSON che ho generato nel server che voglio rendere accessibile sul client in quanto la pagina è visualizzabile. Fondamentalmente quello che voglio ottenere è:

Ho il seguente tag dichiarato nel mio documento html:

 

Il file indicato nella sua fonte ha dati JSON. Come ho visto, i dati sono stati scaricati, proprio come succede con gli script.

Ora, come posso accedervi in ​​Javascript? Ho provato ad accedere al tag script, con e senza jQuery, utilizzando una moltitudine di metodi per cercare di ottenere i miei dati JSON, ma in qualche modo questo non funziona. Ottenere il suo innerHTML avrebbe funzionato se i dati JSON fossero stati scritti in linea nella sceneggiatura. Quale non era e non è quello che sto cercando di ottenere.

Anche la richiesta JSON remota dopo il caricamento della pagina non è un’opzione, nel caso in cui si desideri suggerirla.

Non puoi caricare JSON così, mi dispiace.

So che stai pensando “perché non posso usare src qui? Ho visto cose come queste …”:

   

… beh, per dirla in parole povere, era solo il tag script che veniva “abusato” come titolare di dati. Puoi farlo con tutti i tipi di dati. Ad esempio, molti motori di template sfruttano i tag script per contenere i template .

Hai un breve elenco di opzioni per caricare il tuo JSON da un file remoto:

  1. Usa $.get('your.json') o qualche altro metodo AJAX.
  2. Scrivi un file che imposta una variabile globale sul tuo json. (sembra hokey).
  3. Tiralo in un iframe invisibile, quindi raschia il contenuto di quello dopo che è stato caricato (io chiamo questa “modalità 1997”)
  4. Consulta un prete voodoo.

Punto finale:

Anche la richiesta JSON remota dopo il caricamento della pagina non è un’opzione, nel caso in cui si desideri suggerirla.

… non ha senso La differenza tra una richiesta AJAX e una richiesta inviata dal browser durante l’elaborazione di è sostanzialmente nulla. Entrambi faranno un GET sulla risorsa. A HTTP non interessa se è fatto a causa di un tag script o di una chiamata AJAX, e nemmeno il tuo server.

Un’altra soluzione sarebbe quella di utilizzare un linguaggio di scripting lato server e includere semplicemente json-data inline. Ecco un esempio che utilizza PHP:

   

L’esempio precedente utilizza un tag script aggiuntivo con tipo application/json . Una soluzione ancora più semplice è includere il JSON direttamente nel JavaScript:

  

Il vantaggio della soluzione con il tag extra è che il codice JavaScript e i dati JSON sono tenuti separati l’uno dall’altro.

Sembrerebbe che questo non è ansible, o almeno non supportato.

Dalla specifica HTML5 :

Quando vengono utilizzati per includere blocchi di dati (al contrario di script), i dati devono essere incorporati in linea , il formato dei dati deve essere fornito utilizzando l’attributo type, l’attributo src non deve essere specificato e il contenuto dell’elemento di script deve essere conforms ai requisiti definiti per il formato utilizzato.

Se è necessario caricare JSON da un altro dominio: http://en.wikipedia.org/wiki/JSONP
Tuttavia, tieni presente i potenziali attacchi XSSI: https://www.scip.ch/it/?labs.20160414

Se è lo stesso dominio, usa solo Ajax.

Controlla questa risposta: https://stackoverflow.com/a/7346598/1764509

 $.getJSON("test.json", function(json) { console.log(json); // this will show the info it in firebug console }); 

Un’altra alternativa per utilizzare il json esatto all’interno di javascript. Poiché è una notazione object Javascript, puoi creare il tuo object direttamente con la notazione json. Se lo memorizzi in un file .js, puoi utilizzare l’object nella tua applicazione. Questa è stata un’opzione utile per me quando avevo alcuni dati JSON statici che volevo memorizzare in un file separatamente dal resto della mia app.

  //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 } ] };