blocks|key|213364|text|如果您需要从另一个域加载JSON：http://en.wikipedia.org/wiki/JSONP|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|213365|然而，要注意潜在的XSSI攻击：https://www.scip.ch/en/?labs.20160414|213366|如果它是相同的域，那么只需使用Ajax。|213367|entityMap|0|LINK|mutability|MUTABLE|url|http://en.wikipedia.org/wiki/JSONP|1|https://www.scip.ch/en/?labs.20160414^0|H|Y|0|0|G|11|1|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]]|C|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]|P|$5|K|L|M|C|$N|Q]]]]

<p>If you need to load JSON from another domain:
<a href="http://en.wikipedia.org/wiki/JSONP" rel="nofollow noreferrer">http://en.wikipedia.org/wiki/JSONP</a>
<br>
However be aware of potential XSSI attacks:
<a href="https://www.scip.ch/en/?labs.20160414" rel="nofollow noreferrer">https://www.scip.ch/en/?labs.20160414</a></p>

<p>If it's the same domain so just use Ajax.</p>


blocks|key|431761|text|另一种解决方案是使用服务器端脚本语言，并简单地内联包含json-data。下面是一个使用PHP的示例：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|431762|<script+id="data"+type="application/json"><?php+include('stuff.json');+?></script>
<script>
var+jsonData+=+JSON.parse(document.getElementById('data').textContent)
</script>|code-block|syntax|javascript|431763|上面的例子使用了一个额外的脚本标记，类型为application/json。一种更简单的解决方案是将JSON直接包含到JavaScript中：|offset|length|style|CODE|431764|<script>var+jsonData+=+<?php+include('stuff.json');?>;</script>|431765|使用额外标记的解决方案的优点是，JavaScript代码和JSON数据彼此分开。|431766|entityMap^0|0|0|L|G|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>Another solution would be to make use of a server-side scripting language and to simply include json-data inline. Here's an example that uses PHP:</p>

<pre><code>&lt;script id="data" type="application/json"&gt;&lt;?php include('stuff.json'); ?&gt;&lt;/script&gt;
&lt;script&gt;
var jsonData = JSON.parse(document.getElementById('data').textContent)
&lt;/script&gt;
</code></pre>

<p>The above example uses an extra script tag with type <code>application/json</code>. An even simpler solution is to include the JSON directly into the JavaScript:</p>

<pre><code>&lt;script&gt;var jsonData = &lt;?php include('stuff.json');?&gt;;&lt;/script&gt;
</code></pre>

<p>The advantage of the solution with the extra tag is that JavaScript code and JSON data are kept separated from each other.</p>


blocks|key|213395|text|检查这个答案：https://stackoverflow.com/a/7346598/1764509|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|213396|$.getJSON("test.json",+function(json)+{
++++console.log(json);+//+this+will+show+the+info+it+in+firebug+console
});|code-block|syntax|javascript|213397|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/7346598/1764509^0|7|17|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>Check this answer: <a href="https://stackoverflow.com/a/7346598/1764509">https://stackoverflow.com/a/7346598/1764509</a></p>

<pre><code>$.getJSON("test.json", function(json) {
    console.log(json); // this will show the info it in firebug console
});
</code></pre>


blocks|key|431786|text|在javascript中使用确切的json的另一种选择。因为它是Javascript对象表示法，所以您可以直接使用json表示法创建对象。如果将其存储在.js文件中，则可以在应用程序中使用该对象。当我想要将一些静态json数据缓存到独立于应用程序其余部分的文件中时，这对我来说是一个有用的选择。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|431787|++++//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
++++++++++++}
++++++++]
++++};|code-block|syntax|javascript|431788|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Another alternative to use the exact json within javascript. As it is Javascript Object Notation you can just create your object directly with the json notation. If you store this in a .js file you can use the object in your application. This was a useful option for me when I had some static json data that I wanted to cache in a file separately from the rest of my app.</p>

<pre><code>    //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
            }
        ]
    };
</code></pre>


blocks|key|431798|text|我同意本的观点。您不能加载/导入简单的JSON文件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|431799|但是，如果您确实想这样做，并且可以灵活地更新json文件，那么您可以|431800|my-json.js|431801|+++var+myJSON+=+{
++++++id:+"12ws",
++++++name:+"smith"
++++}|code-block|syntax|javascript|431802|index.html|431803|<head>
++<script+src="my-json.js"></script>
</head>
<body+onload="document.getElementById('json-holder').innerHTML+=+JSON.stringify(myJSON);">
++<div+id="json-holder"></div>
</body>|431804|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>I agree with Ben. You cannot load/import the simple JSON file.</p>

<p>But if you absolutely want to do that and have flexibility to update json file, you can</p>

<p>my-json.js</p>

<pre><code>   var myJSON = {
      id: "12ws",
      name: "smith"
    }
</code></pre>

<p>index.html</p>

<pre><code>&lt;head&gt;
  &lt;script src="my-json.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body onload="document.getElementById('json-holder').innerHTML = JSON.stringify(myJSON);"&gt;
  &lt;div id="json-holder"&gt;&lt;/div&gt;
&lt;/body&gt;
</code></pre>


blocks|key|431813|text|在您的脚本文件json-content.js中放置类似以下内容|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|431814|var+mainjson+=+{+your+json+data}|code-block|syntax|javascript|431815|然后从脚本标记中调用它|431816|<script+src="json-content.js"></script>|431817|然后您可以在下一个脚本中使用它|431818|<script>
console.log(mainjson)
</script>|431819|entityMap^0|7|F|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|10|8|@]|D|@]|E|$]]|$1|Q|3|R|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|S|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|T|$]]

<p>place something like this in your script file  <code>json-content.js</code></p>

<pre><code>var mainjson = { your json data}
</code></pre>

<p>then call it from script tag </p>

<pre><code>&lt;script src="json-content.js"&gt;&lt;/script&gt;
</code></pre>

<p>then you can use it in next script</p>

<pre><code>&lt;script&gt;
console.log(mainjson)
&lt;/script&gt;
</code></pre>


<p>I have this JSON file I generate in the server I want to make accessible on the client as the page is viewable. Basically what I want to achieve is: </p>

<p>I have the following tag declared in my html document: </p>

<pre><code>&lt;script id="test" type="application/json" src="http://myresources/stuf.json"&gt;
</code></pre>

<p>The file referred in its source has JSON data. As I've seen, data has been downloaded, just like it happens with the scripts. </p>

<p>Now, how do I access it in Javascript? I've tried accessing the script tag, with and without jQuery, using a multitude of methods to try to get my JSON data, but somehow this doesn't work. Getting its <code>innerHTML</code> would have worked had the json data been written inline in the script. Which it wasn't and isn't what I'm trying to achieve. </p>

<p>Remote JSON Request after page loads is also not an option, in case you want to suggest that. </p>


HTML/Javascript: how to access JSON data loaded in a script tag with src set

我在服务器上生成了这个JSON文件，希望在客户机上可以访问，因为页面是可查看的。基本上，我想要实现的是：我在html文档中声明了以下标记：<script id="test" type="application/json" src="http://myresources/stuf.json">其源文件中引用的文件包含JS...

问HTML/Javascript:如何访问设置了src的脚本标记中加载的JSON数据
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML/Javascript:如何访问设置了src的脚本标记中加载的JSON数据EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML/Javascript:如何访问设置了src的脚本标记中加载的JSON数据
EN