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

Question

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

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

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

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

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

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

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

677 6

javascript html json html5 script-tag

6 ответов:

Comments

Ничего не найдено.

Ben Lesh · Accepted Answer · 2012-11-27 04:38:54

вы не можете загрузить 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>
... ну, проще говоря, это был просто тег сценария, который "злоупотреблял" в качестве держателя данных. Вы можете сделать это со всеми видами данных. Например, многие механизмы шаблонов используют теги скриптов для хранения шаблонов.

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

использовать $.get('your.json') или какой-то другой такой метод AJAX.

напишите файл, который задает глобальную переменную для вашего json. (кажется фокус).

потяните его в невидимый iframe, а затем очистите содержимое этого после его загрузки (я называю это "режим 1997 года")

проконсультируйтесь со священником вуду.

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

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

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

terabaud · Accepted Answer · 2015-07-14 15:19:50

другим решением было бы использовать язык сценариев на стороне сервера и просто включить 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 хранятся отдельно друг от друга.

btx9000 · Accepted Answer · 2016-07-20 18:49:16

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

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

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

Vitaliy Kaplich · Accepted Answer · 2017-11-07 15:41:21

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

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

L.Grillo · Accepted Answer · 2017-05-23 14:55:03

проверьте этот ответ:https://stackoverflow.com/a/7346598/1764509
$.getJSON("test.json", function(json) {
    console.log(json); // this will show the info it in firebug console
});

DominicTurner · Accepted Answer · 2018-01-22 01:04:09

еще одна альтернатива для использования точного json в javascript. Поскольку это JavaScript Object Notation, вы можете просто создать свой объект непосредственно с помощью нотации 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
            }
        ]
    };