type - HTML/Javascript: cómo acceder a los datos JSON cargados en una etiqueta de script con src set

script type= text/javascript src=

Question

Tengo este archivo JSON que genero en el servidor que quiero hacer accesible en el cliente, ya que la página es visible. Básicamente lo que quiero lograr es:

Tengo lo siguiente:

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

etiqueta declarada en mi documento html. El archivo referido en su fuente tiene datos json. Como he visto, los datos se han descargado, al igual que sucede con los scripts.

Ahora, ¿cómo puedo acceder a ella en javascript? Intenté acceder a la etiqueta del script, con y sin jquery, usando una multitud de métodos para intentar obtener mis datos json, pero de alguna manera esto no funciona. Obtener su innerHTML habría funcionado si los datos json se hubieran escrito en línea en el script. Lo que no era y no es lo que intento lograr.

La solicitud JSON remota después de cargar la página tampoco es una opción, en caso de que quiera sugerir eso.

Answer 1

Mira esta respuesta: https://.com/a/7346598/1764509

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

Answer 2

No puedes cargar JSON así, lo siento.

Sé que estás pensando "¿por qué no puedo usar src aquí? He visto cosas como esta ...":

<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>

... bueno, para decirlo simplemente, esa fue la etiqueta del script "abusada" como un titular de datos. Puedes hacer eso con todo tipo de datos. Por ejemplo, muchos motores de plantillas aprovechan las etiquetas de script para contener plantillas .

Tiene una breve lista de opciones para cargar su JSON desde un archivo remoto:

1. Use $.get(''your.json'') o algún otro método AJAX.
2. Escriba un archivo que establezca una variable global para su json. (parece hokey).
3. Tíralo en un iframe invisible, luego raspa el contenido de eso después de que esté cargado (yo llamo a esto "modo 1997")
4. Consulte a un sacerdote vudú.

Punto final:

La solicitud JSON remota después de cargar la página tampoco es una opción, en caso de que quiera sugerir eso.

... eso no tiene sentido. La diferencia entre una solicitud AJAX y una solicitud enviada por el navegador mientras procesa su <script src=""> es esencialmente nada. Ambos harán un GET en el recurso. A HTTP no le importa si está hecho por una etiqueta de script o una llamada AJAX, y tampoco lo hará su servidor.

Answer 3

Otra alternativa para usar el json exacto dentro de javascript. Como es la notación de objetos Javascript, puedes crear tu objeto directamente con la notación Json. Si almacena esto en un archivo .js, puede usar el objeto en su aplicación. Esta fue una opción útil para mí cuando tenía algunos datos json estáticos que quería guardar en la caché en un archivo por separado del resto de mi aplicación.

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

Answer 4

Otra solución sería hacer uso de un lenguaje de scripting del lado del servidor y simplemente incluir json-data en línea. Aquí hay un ejemplo que usa PHP:

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

El ejemplo anterior usa una etiqueta de script adicional con tipo application/json . Una solución aún más simple es incluir el JSON directamente en JavaScript:

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

La ventaja de la solución con la etiqueta adicional es que el código JavaScript y los datos JSON se mantienen separados.

Answer 5

Parece que esto no es posible, o al menos no es compatible.

A partir de la especificación HTML5 :

Cuando se usa para incluir bloques de datos (en lugar de scripts), los datos deben estar incorporados en línea , el formato de los datos debe darse usando el atributo tipo, el atributo src no debe especificarse , y el contenido del elemento script debe cumplir a los requisitos definidos para el formato utilizado.

Answer 6

Si necesita cargar JSON desde otro dominio: http://en.wikipedia.org/wiki/JSONP
Sin embargo, tenga en cuenta los posibles ataques XSSI: https://www.scip.ch/en/?labs.20160414

Si es el mismo dominio, solo usa Ajax.