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

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

javascript jquery html json

Javascript 如何在html代码中使用json文件,javascript,jquery,html,json,get,Javascript,Jquery,Html,Json,Get,我有一个json文件mydata.json，这个文件中有一些json编码的数据我想在文件index.html中获取这些数据，并用JavaScript处理这些数据。但是一个不知道如何连接.html文件中的.json文件的人请告诉我。这是我的json文件： { "items": [ { "movieID": "65086", "title": "The Woman in Black", "poste

我有一个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文件。我是这个领域的新手。请帮忙。

使用jQuery的

经过一天的工作，我成功地将一个

JSON

文件集成到

HTML

表中

您可以使用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>

嗨，你可以考虑给你的问题增加更多的细节。您使用过JavaScript框架吗？（即：jQuery）你已经试过什么了？期望的最终结果是什么？一个有明确目标的好问题将有助于从社区获得好的答案和例子！使用问题下方的“编辑”链接进行修改。查看链接，其中也提供了示例。我也无法获得示例。。请详细说明…如何在我的html文件中链接jquery。。请帮帮我！我要完整的代码。我想在html页面的表格中显示我的数据。给出一个示例代码。所以我很容易理解。非常感谢您。是否应该将

mydata.json

与

html

文件放在同一个目录中？添加错误处理程序非常有用，否则

getJSON

将以静默方式失败，您将难以理解为什么它不工作：添加

.fail（函数（jqxhr，状态，错误）{alert（status+，“+error）；}）

。如果是本地json文件怎么办？people.json只是本地json文件。将本地json的绝对url提供给$。getJSONI为people.json提供了绝对路径，但它不起作用。例：

file:///path/people.json

只要禁用CORS策略，它就会工作。在我的案例中，CORS源策略是一个真正的问题。我需要我的客户在本地查看页面，所以我不能告诉他们禁用他们的CORS源代码…abc.json不是有效的json文件，它是实际的javascript，所以这里您只需调用一个javascript文件“abc.json”并加载它…如果您想从这个“json”将数组加载到javascript变量中您可以删除外部的单引号。在这种情况下，

数据

将是一个数组，其中包含具有

名称

属性的对象。在这种情况下，不需要

JSON.parse（）

。这正是我想要的。它有助于避免CORS错误，以防有人想从本地html页面读取文件（无需Web服务器）。类似于：file:///C:/dir/jsoncors.html. Otherwise浏览器给出以下错误：“跨源请求仅支持协议方案：http、数据、chrome、chrome扩展、https。”

<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>

{
   "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
       }
   ]
}

<!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>

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