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

у меня есть этот файл JSON, который я генерирую на сервере, который я хочу сделать доступным на клиенте, поскольку страница просматривается. В основном то, что я хочу достичь, это:

у меня есть следующий тег, объявленный в моем html-документе:

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

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

теперь, как мне получить доступ к нему в Javascript? Я попытался получить доступ к тегу script, С и без jQuery, используя множество методов, чтобы попытаться получить мои данные JSON, но почему-то это не работает. Получение его innerHTML сработало бы, если бы данные json были записаны в сценарий. Чего не было и чего я не пытаюсь достичь.

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

66
html html5 javascript json script-tag

6 ответов

вы не можете загрузить 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 провести шаблоны.

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

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

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

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

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

88

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

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

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

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

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

8

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

с спецификация HTML5:

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

3

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

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

2

проверьте этот ответ:https://stackoverflow.com/a/7346598/1764509

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

другая альтернатива для использования точного 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
            }
        ]
    };
0