106

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

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

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

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

现在，我如何在 Javascript 中访问它？我尝试使用多种方法尝试获取我的 JSON 数据，但不知何故这不起作用。如果 json 数据被内联写入脚本中，那么它innerHTML会起作用。它不是，也不是我想要达到的目标。

如果您想建议，页面加载后的远程 JSON 请求也不是一个选项。

4

9 回答 9

126

你不能像那样加载 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 调用而完成，您的服务器也不会。

于 2012-11-27T02:38:54.080 回答
16

另一种解决方案是使用服务器端脚本语言并简单地包含 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>

上面的例子使用了一个额外的 script 标签 type application/json。一个更简单的解决方案是将 JSON 直接包含到 JavaScript 中：

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

带有额外标签的解决方案的优点是 JavaScript 代码和 JSON 数据保持相互分离。

于 2015-07-14T12:19:50.613 回答
11

看起来这是不可能的，或者至少不支持。

从HTML5 规范：

当用于包含数据块时（相对于脚本），数据必须内嵌，数据的格式必须使用 type 属性给出，src 属性不能指定，并且 script 元素的内容必须符合为使用的格式定义的要求。

于 2016-07-20T15:49:16.553 回答
7

虽然目前无法使用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>

要使用上述内容，只需将idandsrc属性替换为您需要的属性。（id我们假设在这种情况下等于mySpecialId）将用于将数据存储在window.jsonData["mySpecialId"].

换句话说，对于每个具有id和使用onload脚本的 iframe，都会将该数据同步加载到指定的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>

在 chrome 中测试，应该在 Firefox 中工作。不确定 IE 或 Safari。

于 2018-10-16T01:42:55.923 回答
4

我同意本。您无法加载/导入简单的 JSON 文件。

但是，如果您绝对想这样做并且可以灵活地更新 json 文件，您可以

我的 json.js

   var myJSON = {
      id: "12ws",
      name: "smith"
    }

索引.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>
于 2019-01-23T23:18:01.233 回答
2

如果您需要从另一个域加载 JSON： http
://en.wikipedia.org/wiki/JSONP 但是请注意潜在的 XSSI 攻击： https ://www.scip.ch/en/?labs.20160414

如果它是同一个域，那么只需使用 Ajax。

于 2014-01-24T18:07:17.010 回答
2

检查这个答案：https ://stackoverflow.com/a/7346598/1764509

$.getJSON("test.json", function(json) {
    console.log(json); // this will show the info it in firebug console
});
于 2017-01-27T11:30:09.410 回答
1

在 javascript 中使用精确 json 的另一种选择。由于它是 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
            }
        ]
    };
于 2018-01-21T23:04:09.127 回答
1

在你的脚本文件中放置这样的东西 json-content.js

var mainjson = { your json data}

然后从脚本标签调用它

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

然后你可以在下一个脚本中使用它

<script>
console.log(mainjson)
</script>
于 2019-06-10T11:14:40.923 回答