Fatal编程技术网
  • javascript/
  • HTML/Javascript：如何使用src set访问加载在脚本标记中的JSON数据

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

javascript json html

HTML/Javascript：如何使用src set访问加载在脚本标记中的JSON数据,javascript,json,html,script-tag,Javascript,Json,Html,Script Tag,我在服务器中生成了这个JSON文件，我希望在页面可查看时可以在客户端访问它。基本上，我想要实现的是： 我在html文档中声明了以下标记： <script id="test" type="application/json" src="http://myresources/stuf.json"> 源文件中引用的文件包含JSON数据。正如我所看到的，数据已经下载，就像脚本一样 现在，我如何在Javascript中访问它？我尝试过使用jQuery和不使用jQuery访问脚本标记，使用多

我在服务器中生成了这个JSON文件，我希望在页面可查看时可以在客户端访问它。基本上，我想要实现的是：

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

<script id="test" type="application/json" src="http://myresources/stuf.json">
源文件中引用的文件包含JSON数据。正如我所看到的，数据已经下载，就像脚本一样

现在，我如何在Javascript中访问它？我尝试过使用jQuery和不使用jQuery访问脚本标记，使用多种方法尝试获取JSON数据，但不知何故，这不起作用。如果json数据是在脚本中内联编写的，那么获取其
innerHTML
就可以了。这不是，也不是我想要实现的

页面加载后的远程JSON请求也不是一个选项，以防您提出建议

抱歉，您不能这样加载JSON

我知道你在想“为什么我不能在这里使用
src
？我见过这样的东西…”


{ 
姓名：“富”
}
$（函数（）{
var x=JSON.parse（$（'#myJson'）.html（））；
警报（x.name）；//Foo
});
。。。简单地说，这只是脚本标签作为数据持有者被“滥用”。你可以用各种各样的数据来做。例如

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

  • 使用
    $.get（'your.json'）
    或其他类似的AJAX方法
  • 编写一个文件，将全局变量设置为json。（似乎是霍基）
  • 将它拉到一个不可见的iframe中，然后在加载后刮去其中的内容（我称之为“1997模式”）
  • 咨询巫毒牧师
    • 最后一点：

    页面加载后的远程JSON请求也不是一个选项，以防您提出建议

    。。。那没有道理。AJAX请求和浏览器在处理
    时发送的请求之间的区别基本上没有什么。他们两个都会在资源上做一次尝试。HTTP不在乎它是因为脚本标记还是AJAX调用而完成的，您的服务器也不在乎。

    如果您需要从另一个域加载JSON：
    但是，请注意潜在的XSSI攻击：

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

    另一个解决方案是使用服务器端脚本语言，只需内联包含json数据。下面是一个使用PHP的示例：

    <script id="data" type="application/json"><?php include('stuff.json'); ?></script>
<script>
var jsonData = JSON.parse(document.getElementById('data').textContent)
</script>
    带有额外标记的解决方案的优点是JavaScript代码和JSON数据彼此分开。

    这似乎是不可能的，或者至少是不受支持的

    从：

    当用于包含数据块时（与脚本相反），数据必须内嵌，数据格式必须使用type属性指定，不得指定src属性，脚本元素的内容必须符合为所用格式定义的要求

    检查以下答案：

    在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
            }
        ]
    };
    虽然当前无法使用
    脚本
    标记，但如果它来自同一域，则可以使用
    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>
    在chrome中测试，应该可以在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 content.js

    var mainjson = { your json data}
    然后从脚本标记调用它

    <script src="json-content.js"></script>
    然后您可以在下一个脚本中使用它

    <script>
console.log(mainjson)
</script>

    
console.log（mainjson）
    将json文件改为javascript文件，将对象分配给变量。另一种方法是使用ajax。第一个建议是当前的实现。我不想这样做，因为我正在使用行为来传递结构。我更喜欢使用structure for structure（如果我想要JSON，我会得到JSON）。第二个建议是不需要的（我需要这些数据用于初始化过程）。@ChuckE通过
    标记或通过AJAX，您仍然需要等待额外的HTTP请求完成。如果您使用“src”属性获取脚本内容，浏览器将不允许您读取脚本内容，因此您唯一的选择是发出AJAX请求。@Pointy-through-a-tag内容将在下载后立即计算。如果我将json脚本放在js脚本之前，json脚本数据将在js脚本数据之前得到评估，这意味着，我不会等待，数据已经存在。关于这是我唯一的选择，我想在同意你之前先看一些官方文档（不是说你错了，只是这正是我写这个问题的原因）。“如果你想建议，在页面加载后远程JSON请求也不是一个选项。”。。。JSON请求与由
    发送的请求有什么不同？他们都会打电话给你的服务器，回答得很好。当你说“脚本标签被“滥用”时，你的意思是这是对脚本标签的错误使用（可能没有错误，但“创造性的”）？你的n。2选项是我们已经在生产中的一个选项，我正在寻找一个严格的json/no js解决方案，纯粹是出于实验（如果我确信它是不可能的，我很好）。关于最后一点，在onload事件之前，我需要这些信息，我不想让整个初始化依赖于异步请求，因为异步请求的完成时间可能会有所不同。 
    <head>
  <script src="my-json.js"></script>
</head>
<body onload="document.getElementById('json-holder').innerHTML = JSON.stringify(myJSON);">
  <div id="json-holder"></div>
</body>

    var mainjson = { your json data}

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

    <script>
console.log(mainjson)
</script>