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

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

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

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

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

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

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

Вы не можете загрузить такой 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 из удаленного файла:

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

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

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

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

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

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

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

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

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

<iframe
id="mySpecialId"
src="/my/link/to/some.json"
onload="(()=>{if(!window.jsonData){window.jsonData={}}try{window.jsonData[this.id]=JSON.parse(this.contentWindow.document.body.textContent.trim())}catch(e){console.warn(e)}this.remove();})();"
onerror="((err)=>console.warn(err))();"
style="display: none;"
></iframe>

Для использования выше, просто заменить idи srcатрибут с тем, что вам нужно. id(Который мы предполагаем , что в этой ситуации равно mySpecialId) будет использоваться для хранения данных в window.jsonData["mySpecialId"].

Другими словами, для каждого iframe, имеющего idи использующего onloadскрипт, эти данные будут синхронно загружены в window.jsonDataобъект в соответствии с idуказанным.

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

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

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

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

Я согласен с Беном. Вы не можете загрузить / импортировать простой файл 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>

Отметьте этот ответ: https://stackoverflow.com/a/7346598/1764509

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

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

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

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

var mainjson = { your json data}

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

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

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

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

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