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 è:HTML/Javascript: come accedere ai dati JSON caricati in un tag script con src set

Ho il seguente:

<script id="test" type="application/json" src="http:/myresources/stuf.json">

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, usando 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.

Richiesta JSON remota dopo il caricamento della pagina non è un'opzione, nel caso in cui si desideri suggerirla.

fonte

2012-11-22 ChuckE

Invece di un file JSON, renderlo un file javascript che assegna l'oggetto a una variabile. L'altro approccio è usare ajax. –

Il primo suggerimento è l'implementazione corrente. Mi piacerebbe non farlo perché sto usando il comportamento per fornire una struttura. Preferirei usare la struttura per la struttura (se voglio JSON, otterrò JSON). Il secondo suggerimento non è voluto (ho bisogno di questi dati per il processo di inizializzazione). – ChuckE

@ChuckE tramite un tag '

Se è necessario caricare JSON da un altro dominio: http://en.wikipedia.org/wiki/JSONP
tuttavia essere consapevoli dei potenziali attacchi XSSI modificando: https://www.scip.ch/en/?labs.20160414

Se è lo stesso dominio, in modo basta usare Ajax.

fonte

2014-01-24 18:07:17

JSONP non funziona con i risultati in formato JSON. Inoltre, i parametri JSONP passati come argomenti a uno script sono definiti dal server ... a cui potresti non avere accesso. –

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

<script id="data" type="application/json"><?php include('stuff.json'); ?></script> 
<script> 
var jsonData = JSON.parse(document.getElementById('data').textContent) 
</script>

L'esempio precedente utilizza un tag script in più con il tipo application/json. Una soluzione ancora più semplice è quella di includere il JSON direttamente in JavaScript:

<script>var jsonData = <?php include('stuff.json');?>;</script>

Il vantaggio della soluzione con il tag in più è che i dati di codice JavaScript e JSON sono tenuti separati gli uni dagli altri.

fonte

2015-07-14 12:19:50 terabaud

+ per contenuto di testo. .html non funziona per me sul tag script –

Sembra che questo non sia possibile, o almeno non supportato.

Dal HTML5 specification:

Quando usato per includere blocchi di dati (al contrario di script), i dati devono essere incorporati in linea, il formato dei dati deve essere somministrata usando type , , l'attributo src non deve essere specificato e il contenuto dell'elemento di script deve essere conforme ai requisiti definiti per il formato utilizzato.

fonte

2016-07-20 15:49:16 btx9000

Controllare 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 
});

fonte

2017-01-27 11:30:09

$ .getJSON() è una chiamata Ajax. –

Come posso mostrare le informazioni in un file HTML collegato al posto della console? –

Un'altra alternativa per utilizzare il JSON esatta all'interno javascript. Poiché è una notazione oggetto Javascript, puoi creare il tuo oggetto direttamente con la notazione json. Se lo memorizzi in un file .js, puoi utilizzare l'oggetto 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 
      } 
     ] 
    };

fonte

2018-01-21 23:04:09 DominicTurner

Problemi correlati