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

  • Z时代
  • 2024-01-10
  • 分类：问答

我有json文件mydata.json，并且在此文件中是一些json编码的数据。

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

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

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

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

回答：

<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表中！！！！

以上是 如何在html代码中使用json文件 的全部内容， 来源链接： utcz.com/qa/416102.html

回到顶部