我有一个在服务器中生成的JSON文件，由于该页面可见，因此我希望在客户端上对其进行访问。基本上我想实现的是：
我在html文档中声明了以下标签：
<script id="test" type="application/json" src="http://myresources/stuf.json">
源中引用的文件具有JSON数据。如我所见，数据已经下载，就像脚本一样。
现在，如何使用Javascript访问它？我尝试使用多种方法来访问带有和不带有jQuery的脚本标签，以尝试获取我的JSON数据，但是这不起作用。innerHTML如果将json数据内嵌在脚本中，则获取它的工作将是可行的。不是，不是我想要达到的目标。
页面加载后的远程JSON请求也不是一种选择，以防您建议这样做。
<script>标签或通过AJAX的@ChuckE，您仍然必须等待其他HTTP请求完成。如果使用“ src”属性获取脚本内容，浏览器将不允许您读取脚本内容，因此，唯一的选择是发出AJAX请求。
<script src=""></script>有何不同？他们都将对您的服务器进行GET调用。
Answers:
抱歉，您无法像这样加载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：
$.get('your.json')或其他某种AJAX方法。最后一点：
页面加载后的远程JSON请求也不是一种选择，以防您建议这样做。
...那没有道理。AJAX请求和浏览器在处理您的请求时发送的请求之间的区别<script src="">本质上没有什么区别。他们都将对资源进行GET。HTTP不在乎是否由于脚本标记或AJAX调用而完成，您的服务器也不会。
<script>标记中，我想走那条路。
另一种解决方案是利用服务器端脚本语言，并简单地内嵌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数据保持彼此分离。
虽然目前无法使用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>
经过镀铬测试，可在Firefox中使用。不确定IE或Safari。
我同意本。您无法加载/导入简单的JSON文件。
但是，如果您绝对希望这样做并且可以灵活地更新json文件，则可以
my-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>
如果您需要从另一个域加载JSON：http
:
//en.wikipedia.org/wiki/JSONP
但是请注意潜在的XSSI攻击：https ://www.scip.ch/en/ ? labs.20160414
如果是同一个域，那么只需使用Ajax。
在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
}
]
};