HTML/Javascript：如何访问加载在脚本标签中的 JSON 数据，并设置了 src

javascript html json script-tag

2022-08-30 05:34:04

我有这个JSON文件，我在服务器中生成，我想在客户端上访问，因为页面是可查看的。基本上，我想实现的是：

我在 html 文档中声明了以下标记：

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

其源中引用的文件具有 JSON 数据。正如我所看到的，数据已经下载，就像脚本一样。

现在，我如何在Javascript中访问它？我尝试过使用和不使用jQuery访问脚本标签，使用多种方法来尝试获取我的JSON数据，但不知何故这不起作用。如果json数据在脚本中内联编写，则获取它将起作用。这不是，也不是我想要实现的目标。innerHTML

页面加载后的远程 JSON 请求也不是一个选项，以防您提出建议。

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

...简单地说，这只是脚本标签作为数据持有者被“滥用”。你可以用各种各样的数据来做到这一点。例如，许多模板引擎利用脚本标记来保存模板。

您有一个简短的选项列表，用于从远程文件加载 JSON：

使用或其他一些类似的 AJAX 方法。$.get('your.json')
编写一个将全局变量设置为 json 的文件。（似乎很滑稽）。
将其拉入一个看不见的iframe，然后在加载后抓取其中的内容（我称之为“1997模式”）
咨询巫毒教牧师。

最后一点：

页面加载后的远程 JSON 请求也不是一个选项，以防您提出建议。

...这是没有道理的。AJAX 请求和浏览器在处理您的请求时发送的请求之间的区别基本上不算什么。他们都将对资源进行GET。HTTP 并不关心它是由于脚本标记还是 AJAX 调用而完成的，您的服务器也不会。<script src="">

答案 2

另一种解决方案是使用服务器端脚本语言，并简单地将json数据内联。下面是一个使用 PHP 的示例：

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

上面的示例使用类型为的额外脚本标记。一个更简单的解决方案是将JSON直接包含在JavaScript中：application/json

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

带有额外标记的解决方案的优点是JavaScript代码和JSON数据彼此分开。