如何在html代码中使用json文件答案

【问题标题】：how to use json file in html code如何在html代码中使用json文件
【发布时间】：2012-08-17 17:30:26
【问题描述】：

我有 json 文件 mydata.json，在这个文件中有一些 json 编码的数据。

我想在文件index.html 中获取这些数据并在JavaScript 中处理这些数据。但是不知道如何在 .html 文件中连接.json 文件？

请告诉我。这是我的 json 文件：

{
    "items": [
        {
            "movieID": "65086",
            "title": "The Woman in Black",
            "poster": "/kArMj2qsOnpxBCpSa3RQ0XemUiX.jpg"
        },
        {
            "movieID": "76726",
            "title": "Chronicle",
            "poster": "/853mMoSc5d6CH8uAV9Yq0iHfjor.jpg"
        }
    ]
}

认为我正在从服务器获取 json 文件，如何在我的 html 中使用该文件，以便我可以在 html 页面的表格中显示数据。我正在使用 JavaScript 来解析 json 文件。我是这个领域的新手。请帮忙。

【问题讨论】：

您好，您可以考虑为您的问题添加更多细节。你在使用任何 JavaScript 框架吗？（即：jQuery）您已经尝试过什么？期望的最终结果是什么？一个目标明确的好问题将有助于从社区中获得好的答案和示例！使用问题下方的“编辑”链接进行修改。
查看链接，其中还提供了示例api.jquery.com/jQuery.getJSON
我无法获得示例.. 请详细说明...

标签： javascript jquery html json get

【解决方案1】：

使用jQuery的$.getJSON

$.getJSON('mydata.json', function(data) {
    //do stuff with your data here
});

【讨论】：

如何在我的html文件中链接jquery..请帮助我！我想要完整的代码。我想在我的 html 页面的表格中显示我的数据。给出一个示例代码。所以我很容易理解。谢谢你的期待。
应该mydata.json 与html 文件位于同一目录中吗？
添加错误处理程序很有用，否则getJSON 将静默失败，您将难以理解为什么它不起作用：添加.fail(function(jqxhr, status, error) { alert(status + ", " + error);})。

【解决方案2】：

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>

<script>

    $(function() {


   var people = [];

   $.getJSON('people.json', function(data) {
       $.each(data.person, function(i, f) {
          var tblRow = "<tr>" + "<td>" + f.firstName + "</td>" +
           "<td>" + f.lastName + "</td>" + "<td>" + f.job + "</td>" + "<td>" + f.roll + "</td>" + "</tr>"
           $(tblRow).appendTo("#userdata tbody");
     });

   });

});
</script>
</head>

<body>

<div class="wrapper">
<div class="profile">
   <table id= "userdata" border="2">
  <thead>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email Address</th>
            <th>City</th>
        </thead>
      <tbody>

       </tbody>
   </table>

</div>
</div>

</body>
</html>

我的JSON 文件：

{
   "person": [
       {
           "firstName": "Clark",
           "lastName": "Kent",
           "job": "Reporter",
           "roll": 20
       },
       {
           "firstName": "Bruce",
           "lastName": "Wayne",
           "job": "Playboy",
           "roll": 30
       },
       {
           "firstName": "Peter",
           "lastName": "Parker",
           "job": "Photographer",
           "roll": 40
       }
   ]
}

经过一天的工作，我成功地将JSON 文件集成到HTML 表中！！！

【讨论】：

如果是本地json文件呢？
people.json 只是本地 json。将本地 json 的绝对 url 提供给 $.getJSON
我已经为 people.json 提供了绝对路径，但它不起作用。例如：file:///path/people.json
只需禁用 CORS 策略，它就会起作用，请参阅 stackoverflow.com/questions/17711924/…
CORS 原产地政策对我来说是一个真正的问题。我需要我的客户在本地查看该页面，所以我不能告诉他们禁用他们的 CORS 来源...

【解决方案3】：

您可以像...一样使用 JavaScript 只需提供您的 json 文件的正确路径...

<!doctype html>
<html>
    <head>
        <script type="text/javascript" src="abc.json"></script>
        <script type="text/javascript" >
            function load() {
                var mydata = JSON.parse(data);
                alert(mydata.length);

                var div = document.getElementById('data');

                for(var i = 0;i < mydata.length; i++)
                {
                    div.innerHTML = div.innerHTML + "<p class='inner' id="+i+">"+ mydata[i].name +"</p>" + "<br>";
                }
            }
        </script>
    </head>
    <body onload="load()">
        <div id="data">

        </div>
    </body>
</html>

只需获取数据并将其附加到 div... 最初在 alert 中打印长度。

这是我的 Json 文件：abc.json

data = '[{"name" : "Riyaz"},{"name" : "Javed"},{"name" : "Arun"},{"name" : "Sunil"},{"name" : "Rahul"},{"name" : "Anita"}]';

【讨论】：

abc.json 不是一个有效的 json 文件，它是真正的 javascript，所以在这里你只是调用一个 javascript 文件“abc.json”并加载它......
如果你想从这个“JSON”将一个数组加载到一个 JavaScript 变量中，你可以删除外部的单引号。在这种情况下，data 将是一个包含具有name 属性的对象的数组。在这种情况下不需要JSON.parse()。
这正是我想要的。如果有人想从本地 html 页面读取文件（没有 WebServer），它有助于避免 CORS 错误。类似：“file:///C:/dir/jsoncors.html。Othewise 浏览器给出以下错误：“跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https。”跨度>