HTML / Javascript:如何访问使用src集合加载到脚本标记中的JSON数据

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (8)

我在服务器中生成了这个JSON文件,因为该页面是可见的,因此我希望在客户端可以访问该文件。基本上我想实现的是:

我有以下几点:

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

标签在我的html文档中声明。源码中引用的文件具有json数据。正如我所看到的,数据已经被下载,就像脚本一样。

现在,我如何在JavaScript中访问它?我尝试过使用和不使用jQuery访问脚本标记,使用多种方法尝试获取我的json数据,但不知何故,这不起作用。如果将json数据以内联方式写入脚本,那么获得它的innerHTML就可以奏效。这不是,也不是我想要实现的。

在页面加载之后的远程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>

......简而言之,那就是脚本标记被“abused”为数据持有者。你可以用各种数据来做到这一点。例如,很多模板引擎利用脚本标签来保存模板

您有一个简短的选项列表来从远程文件加载您的JSON:

  1. 使用$.get('your.json')或其他这样的AJAX方法。
  2. 写一个文件来为你的json设置一个全局变量。(似乎很好笑)。
  3. 把它拉到一个不可见的iframe中,然后在它被加载后刮掉它的内容(我称之为“1997模式”)
  4. 请教伏都教牧师。

最后一点:

在页面加载之后的远程JSON请求也不是一个选项,以防你想提示。

......这没有意义。AJAX请求和浏览器在处理您的请求时发送的请求之间的区别<script src="">本质上是没有的。他们都会在资源上进行GET。由于脚本标记或AJAX调用,HTTP并不关心它是否完成,您的服务器也不会。

用户回答回答于

另一种解决方案是使用服务器端脚本语言,并简单地将json-data内联。这里有一个使用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数据保持彼此分离。

扫码关注云+社区