html访问json字段,HTML / Javascript：如何使用src访问在脚本标签中加载的JSON数据

HTML / Javascript：如何使用src访问在脚本标签中加载的JSON数据

我有一个在服务器中生成的JSON文件，我想使其在客户端可见，因为页面可见。 基本上我想实现的是：

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

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

现在，如何使用Javascript访问它？ 我尝试使用多种方法来访问带有jQuery和不带有jQuery的脚本标签，以尝试获取我的JSON数据，但是这不起作用。 如果将json数据内嵌在脚本中，则获取innerHTML可能会奏效。 不是，不是我想要达到的目标。

页面加载后的远程JSON请求也不是一种选择，以防您建议这样做。

8个解决方案

96 votes

抱歉，您无法像这样加载JSON。

我知道您在想“为什么我不能在这里只使用

{

name: 'Foo'

}

$(function() {

var x = JSON.parse($('#myJson').html());

alert(x.name); //Foo

});

...简而言之，那就是脚本标签被“滥用”为数据持有人。 您可以使用各种数据来做到这一点。 例如，许多模板引擎利用脚本标签来保存模板。

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

使用

编写一个将全局变量设置为json的文件。 (似乎曲棍球)。

将其拉入不可见的iframe中，然后在加载后将其内容抓取(我称之为“ 1997模式”)

咨询巫毒教士。

最后一点：

页面加载后的远程JSON请求也不是一种选择，以防您建议这样做。

...那没有道理。 在处理

Ben Lesh answered 2019-09-22T17:20:12Z

9 votes

另一种解决方案是利用服务器端脚本语言，并简单地内嵌json-data。 这是一个使用PHP的示例：

var jsonData = JSON.parse(document.getElementById('data').textContent)

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

具有额外标签的解决方案的优势在于，JavaScript代码和JSON数据保持彼此分离。

Lea Rosema answered 2019-09-22T17:20:51Z

5 votes

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

根据HTML5规范：

当用于包括数据块(与脚本相对)时，必须以嵌入式方式嵌入数据，必须使用type属性指定数据格式，不得指定src属性，并且脚本元素的内容必须符合 符合为使用的格式定义的要求。

btx9000 answered 2019-09-22T17:21:30Z

3 votes

虽然目前无法使用script标签，但如果来自相同域，则可以使用iframe。

我这样做是出于娱乐目的，并表明它是“可能的”，但我不建议您使用它。

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();

}

经过镀铬测试，可以在Firefox中使用。 不确定IE或Safari。

kemicofa answered 2019-09-22T17:22:08Z

2 votes

检查以下答案：[https://stackoverflow.com/a/7346598/1764509]

$.getJSON("test.json", function(json) {

console.log(json); // this will show the info it in firebug console

});

L.Grillo answered 2019-09-22T17:22:33Z

2 votes

如果您需要从另一个域加载JSON：[http://en.wikipedia.org/wiki/JSONP]

但是，请注意潜在的XSSI攻击：[https://www.scip.ch/en/?labs.20160414]

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

Vitaliy Kaplich answered 2019-09-22T17:23:11Z

1 votes

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

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

我-json.js

var myJSON = {

id: "12ws",

name: "smith"

}

的index.html

Karan answered 2019-09-22T17:23:51Z

0 votes

在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

}

]

};

DominicTurner answered 2019-09-22T17:24:16Z