HTML/Javascript: как получить доступ к данным JSON, загруженным в тег script с помощью набора src

Ответ 1

Вы не можете загрузить JSON, извините.

Я знаю, что вы думаете: "Почему я не могу просто использовать src здесь? Я видел такие вещи...":

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

... Проще говоря, это был тег script, который "злоупотреблял" как держатель данных. Вы можете сделать это со всеми видами данных. Например, множество шаблонов шаблонов используют теги script для хранения шаблонов.

У вас есть короткий список параметров для загрузки JSON из удаленного файла:

• Используйте $.get('your.json') или какой-либо другой такой метод AJAX.
• Напишите файл, который устанавливает глобальную переменную в ваш json. (кажется, hokey).
• Потяните его в невидимый iframe, затем очистите содержимое этого после его загрузки (я называю этот режим "1997" )
• Обратитесь к священнику из вуду.

Конечная точка:

Удаленный запрос JSON после загрузки страницы также не является вариантом, если вы хотите предложить это.

... это не имеет смысла. Разница между запросом AJAX и запросом, отправленным браузером при обработке вашего <script src="">, по существу, ничто. Они оба будут делать GET на ресурсе. HTTP не заботит, было ли это сделано из-за тега script или вызова AJAX, и ни один из них не будет работать на вашем сервере.

Ответ 2

Другим решением было бы использовать серверный язык сценариев и просто включать встроенные json-данные. Вот пример, который использует PHP:

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

В приведенном выше примере используется дополнительный тег script с типом application/json. Еще более простым решением является включение JSON непосредственно в JavaScript:

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

Преимущество решения с дополнительным тегом заключается в том, что код JavaScript и данные JSON хранятся отдельно друг от друга.

Ответ 3

Казалось бы, это невозможно или, по крайней мере, не поддерживается.

Из спецификации HTML5:

При использовании для включения блоков данных (в отличие от сценариев) данные должны быть встроены в строку, формат данных должен быть задан с использованием атрибута type, атрибут src не должен указываться, а содержимое элемента script должно соответствовать к требованиям, определенным для используемого формата.

Ответ 4

Хотя это в настоящее время невозможно с тегом script, это возможно с iframe если он из того же домена.

Я сделал это для развлечения и чтобы показать, что это "возможно", но я не рекомендую его использовать.

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

Проверено в Chrome и должно работать в Firefox. Не уверен насчет IE или Safari.

Ответ 5

Если вам нужно загрузить JSON из другого домена: http://en.wikipedia.org/wiki/JSONP
Однако имейте в виду потенциальные атаки XSSI: https://www.scip.ch/en/?labs.20160414

Если это тот же домен, просто используйте Ajax.

Ответ 6

Отметьте этот ответ: fooobar.com/questions/33495/...

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

Ответ 7

Я согласен с Беном. Вы не можете загрузить/импортировать простой файл JSON.

Но если вы абсолютно хотите это сделать и можете гибко обновлять файл json, вы можете

мой-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>

Ответ 8

Еще одна альтернатива, чтобы использовать точный JSON в JavaScript. Поскольку это нотация объектов Javascript, вы можете просто создать свой объект непосредственно с помощью нотации json. Если вы храните это в файле .js, вы можете использовать объект в вашем приложении. Это был полезный вариант для меня, когда у меня были статические данные json, которые я хотел кэшировать в файле отдельно от остальной части моего приложения.

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

Ответ 9

поместите что-то подобное в ваш файл скрипта json-content.js

var mainjson = { your json data}

затем вызвать его из тега скрипта

<script src="json-content.js"></script>

тогда вы можете использовать его в следующем скрипте

<script>
console.log(mainjson)
</script>