我有我在服务器上生成的JSON文件，因为页面是可见的，所以我想在客户端上访问它。基本上我想要实现的是：
我在我的html文档中声明了以下标记：
<script id="test" type="application/json" src="http://myresources/stuf.json">
源中引用的文件具有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>
......简而言之，就是脚本标签被“滥用”为数据持有者。你可以用各种数据做到这一点。例如，a lot of templating engines leverage script tags to hold templates。
您有一个从远程文件加载JSON的简短选项列表：
$.get('your.json')或其他一些这样的AJAX方法。最后一点：
页面加载后的远程JSON请求也不是一个选项，以防您想要建议。
......这没有意义。处理你的<script src="">时，浏览器发送的AJAX请求和请求之间的区别基本上没什么。他们都将对资源进行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数据保持彼此分离。
看起来这是不可能的，或者至少不支持。
当用于包含数据块（而不是脚本）时，数据必须内联嵌入，数据的格式必须使用type属性给出，不得指定src属性，并且脚本元素的内容必须符合根据所用格式定义的要求。
虽然script标签目前无法实现，但如果它来自同一个域，则可以使用iframe。
我这样做很有趣，并表明它是“可能的”，但我不建议它被使用。
<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。
检查这个答案：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文件。
但是，如果您绝对想要这样做并且可以灵活地更新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>
另一种在javascript中使用精确json的替代方法。由于它是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
}
]
};
在你的脚本文件json-content.js中放置这样的东西
var mainjson = { your json data}
然后从脚本标记中调用它
<script src="json-content.js"></script>
然后你可以在下一个脚本中使用它
<script>
console.log(mainjson)
</script>