Question

所以，我正在开展一个项目来创建一个＆＃34; Twitter＆＃34;页。目标是使用JSON文件（http://vagalumewifi.com.br/timeline.json）并显示其中包含的一些信息。到目前为止，我的页面没有显示任何内容，只有表头。我尝试将json文件保存在我的计算机上，但仍然没有。

＆＃13;

$(function() {
  var posts = [];
  var sitioOnline = "http://vagalumewifi.com.br/timeline.json?callback=?";
  $.getJSON("timeline.json", function(data) {
    $.each(data.posts, function(i, f) {
      var tblRow = "<tr>" + "<td>" + f.user.username + "</td>" + "<td>" + f.content + "</td>" + "<td>" + f.user.location + "</td>" + "<td> " + f.date + "</td>" + "</tr>"
      $(tblRow).appendTo("#entrydata tbody");
    });
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
</head>

<body>
  <table>
    <thead>
      <th>UserName</th>
      <th>Message</th>
      <th>Location</th>
      <th>Time</th>
    </thead>

    <tbody>
    </tbody>

  </table>

</body>

</html>

＆＃13;

Answer 1

重要的是要考虑以下因素：

当您的网络在Web服务器或本地主机服务器上运行时，您可以进行XMLHttpRequest次呼叫。
您可以对具有响应标头XMLHttpRequest的任何资源进行Access-Control-Allow-Origin: *次调用。 url http://vagalumewifi.com.br/timeline.json没有它，因此，您无法通过XMLHttpRequest对象请求。您无法使用$.getJSON。

我通过使用json文件中的本地数据进行了一些演示。（http://vagalumewifi.com.br/timeline.json）

<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
  <meta charset="utf-8" />
  <style type="text/css">
    table#entrydata {
      border-collapse: collapse;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    table#entrydata caption {
      background-color: inherit;
      background-image: linear-gradient(#e5eafb, #8b99af);
      border-left: solid 1px #cccccc;
      border-right: solid 1px #cccccc;
      border-top: solid 1px #cccccc;
      border-radius: 10px 10px 0 0;
      color: #ffffff;
      font-size: 1em;
      padding: 5px;
    }
    table#entrydata th {
      background-color: inherit;
      background-image: linear-gradient(#8b99af, #e5eafb);
      color: #ffffff;
    }
    table#entrydata th,
    table#entrydata td {
      border: solid 1px #cccccc;
      font-size: 0.8em;
      padding: 5px;
    }
    .odd {
      background-color: #e7ecf5;
      color: #444444;
    }
    .even {
      background-color: #ffffff;
      color: #444444;
    }
  </style>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

</head>

<body>
  <script>
    $(function() {
      var data = [{
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.",
        "date": "2014-01-04T09:28:54 +03:00",
        "likes": 745,
        "user": {
          "id": 37,
          "username": "pearson",
          "location": "Unionville, Palau",
          "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png",
          "bio": "Duis aliquip ad consectetur laborum dolor ad ut nostrud in irure. Duis magna dolore excepteur eiusmod non. Reprehenderit voluptate est culpa incididunt cillum incididunt consectetur veniam. Sit reprehenderit et dolore et laborum aliquip irure excepteur sit excepteur sit sit in. Ex incididunt Lorem adipisicing in. Ex excepteur dolor pariatur tempor do Lorem culpa pariatur ad. In in do ad nulla fugiat eiusmod adipisicing elit ipsum eiusmod nulla reprehenderit.\r\n",
          "friends": 609
        }
      }, {
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.",
        "date": "2015-03-17T09:07:29 +03:00",
        "likes": 992,
        "user": {
          "id": 39,
          "username": "fischer",
          "location": "Sunwest, Michigan",
          "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png",
          "bio": "Cupidatat id amet enim id ullamco dolor consectetur voluptate. Nisi labore minim commodo reprehenderit amet ullamco ea sit. Cillum proident pariatur cupidatat sit adipisicing et quis nostrud ut veniam mollit aute adipisicing in. Commodo est ullamco commodo voluptate consectetur minim eu ad labore sint consequat cillum.\r\n",
          "friends": 908
        }
      }, {
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.",
        "date": "2015-08-31T07:28:57 +03:00",
        "likes": 377,
        "user": {
          "id": 40,
          "username": "carver",
          "location": "Westwood, West Virginia",
          "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png",
          "bio": "Minim id mollit nostrud velit amet sit veniam enim ut excepteur anim mollit voluptate velit. Est labore ipsum consectetur cupidatat ut ea reprehenderit ex sunt aliquip. Irure culpa proident sint commodo magna esse excepteur amet do labore pariatur amet. Do laborum commodo sint exercitation quis tempor deserunt ex fugiat elit labore laborum voluptate. Eu sunt occaecat voluptate Lorem aliqua exercitation ea aliquip. Aliqua ipsum duis eu nulla ipsum ipsum consequat consequat deserunt occaecat dolore cupidatat aute. Aute esse reprehenderit sint ad eu commodo non nulla.\r\n",
          "friends": 1
        }
      }, {
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.",
        "date": "2015-09-14T03:35:53 +03:00",
        "likes": 672,
        "user": {
          "id": 41,
          "username": "zelma",
          "location": "Flintville, Washington",
          "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png",
          "bio": "Nulla est quis labore ipsum est mollit laborum. Cillum est mollit anim duis mollit minim in. Ipsum cillum labore ut amet culpa esse dolor amet proident irure. Ullamco sint Lorem ad ut pariatur labore in laborum anim qui non. Excepteur pariatur id labore et exercitation non. Sint sunt commodo reprehenderit mollit commodo pariatur non veniam nostrud ullamco.\r\n",
          "friends": 195
        }
      }, {
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.",
        "date": "2014-05-07T07:40:35 +03:00",
        "likes": 462,
        "user": {
          "id": 42,
          "username": "cassandra",
          "location": "Greenfields, New Jersey",
          "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png",
          "bio": "Sit anim consectetur amet in eu. Incididunt enim voluptate labore pariatur nisi nisi occaecat exercitation incididunt proident. Officia minim sint magna adipisicing incididunt. In non exercitation laborum consequat. Officia officia eiusmod nisi culpa et ullamco. Et officia dolore id voluptate sunt cillum est laboris cupidatat tempor tempor ullamco do. Aliqua pariatur ea ea eu.\r\n",
          "friends": 640
        }
      }, {
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.",
        "date": "2015-06-19T01:45:59 +03:00",
        "likes": 317,
        "user": {
          "id": 43,
          "username": "whitehead",
          "location": "Floris, Georgia",
          "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png",
          "bio": "Eu esse sunt ipsum labore mollit eu sunt. Aliqua labore proident amet exercitation sunt culpa duis nostrud laboris cillum esse enim esse. Duis velit exercitation minim aute proident veniam laboris adipisicing aliqua in consequat commodo. Proident reprehenderit ut deserunt eu reprehenderit magna ipsum excepteur excepteur laborum. Et sint cupidatat in velit sunt ipsum. Enim nostrud enim duis exercitation elit aute eu cupidatat.\r\n",
          "friends": 920
        }
      }, {
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.",
        "date": "2014-11-02T05:16:09 +03:00",
        "likes": 564,
        "user": {
          "id": 44,
          "username": "avila",
          "location": "Vincent, North Dakota",
          "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png",
          "bio": "Culpa anim mollit do voluptate labore adipisicing consectetur aute nostrud velit. Magna minim nulla ea incididunt labore irure nisi velit ea nulla dolore reprehenderit duis deserunt. Pariatur aute nostrud irure eiusmod laborum enim incididunt. Minim proident velit proident excepteur irure eiusmod velit anim eiusmod. Cupidatat laborum cillum dolor aliquip ea sint. Eu quis incididunt adipisicing culpa sunt reprehenderit nostrud incididunt reprehenderit dolor. Eu incididunt incididunt ut magna dolore dolore cupidatat reprehenderit exercitation sint.\r\n",
          "friends": 764
        }
      }, {
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.",
        "date": "2015-04-27T12:39:45 +03:00",
        "likes": 246,
        "user": {
          "id": 45,
          "username": "gardner",
          "location": "Riverton, Arizona",
          "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png",
          "bio": "Excepteur dolore reprehenderit in nisi sit sint excepteur culpa enim cillum do sit nisi laboris. Exercitation proident eiusmod reprehenderit velit tempor culpa do dolore labore. Excepteur pariatur ea velit eiusmod commodo amet commodo deserunt adipisicing aute. Id ea ea laborum aliqua dolor deserunt nisi labore id aliqua minim. Laboris esse dolore laborum labore fugiat labore exercitation enim fugiat mollit incididunt. Cupidatat nulla aliqua veniam qui. Minim duis elit Lorem dolore sit.\r\n",
          "friends": 766
        }
      }, {
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.",
        "date": "2015-01-19T01:02:02 +03:00",
        "likes": 130,
        "user": {
          "id": 46,
          "username": "griffith",
          "location": "Sardis, California",
          "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png",
          "bio": "Adipisicing eiusmod aliqua nostrud anim cillum consectetur. Reprehenderit cupidatat cupidatat reprehenderit elit est ipsum laboris sint laboris magna laborum. Fugiat sunt ad elit voluptate quis deserunt minim commodo ex id nisi. Amet et labore eu proident ullamco nisi eu id ipsum labore incididunt consequat eu mollit. Laboris ut quis fugiat veniam occaecat. Excepteur anim ea fugiat pariatur deserunt ex Lorem veniam id esse laborum. Consectetur ad deserunt commodo ex et duis anim excepteur cillum cillum et consequat in occaecat.\r\n",
          "friends": 183
        }
      }, {
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.",
        "date": "2014-11-22T11:21:55 +03:00",
        "likes": 318,
        "user": {
          "id": 47,
          "username": "rhea",
          "location": "Hachita, Nevada",
          "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png",
          "bio": "Aute eiusmod laboris adipisicing cupidatat aliquip exercitation cillum tempor duis adipisicing proident voluptate occaecat. Nostrud officia commodo ut ea. Amet fugiat excepteur nostrud incididunt. Nostrud enim elit amet quis. Ex ut in id qui eiusmod.\r\n",
          "friends": 852
        }
      }, {
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.",
        "date": "2014-02-08T11:59:53 +03:00",
        "likes": 977,
        "user": {
          "id": 48,
          "username": "hyde",
          "location": "Lydia, Northern Mariana Islands",
          "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png",
          "bio": "Sint incididunt in ad adipisicing mollit non dolor velit fugiat magna id dolor. Duis esse esse id adipisicing. Tempor adipisicing dolore irure et duis sunt deserunt laboris aliqua culpa voluptate. Minim consectetur dolore do amet.\r\n",
          "friends": 747
        }
      }, {
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.",
        "date": "2014-03-15T03:29:25 +03:00",
        "likes": 962,
        "user": {
          "id": 49,
          "username": "barr",
          "location": "Watrous, South Carolina",
          "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png",
          "bio": "Cupidatat enim qui et adipisicing fugiat magna amet commodo duis id in. Nostrud ipsum amet fugiat id fugiat ut dolore deserunt aute anim. Consectetur duis occaecat anim excepteur deserunt ut excepteur sint quis.\r\n",
          "friends": 543
        }
      }];
      var tblRow;
      $.each(data, function(i, f) {
        tblRow = "<tr class=";
        tblRow += (i % 2 === 0) ? "odd" : "even";
        tblRow += "><td>";
        tblRow += f.user.username;
        tblRow += "</td><td>";
        tblRow += f.content;
        tblRow += "</td><td>";
        tblRow += f.user.location;
        tblRow += "</td><td>";
        tblRow += f.date;
        tblRow += "</td></tr>";
        $(tblRow).appendTo("#entrydata tbody");
      });
    });
  </script>
  <table id="entrydata">
    <caption>
      Timeline
    </caption>
    <thead>
      <tr>
        <th>UserName</th>
        <th>Message</th>
        <th>Location</th>
        <th>Time</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</body>

</html>

<强>更新

我建议使用jQuery 1.12.4。

使用json文件进行演示：

<强>的index.html：

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <meta charset="utf-8" />
  <style type="text/css">
    table#entrydata {
      border-collapse: collapse;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    table#entrydata caption {
      background-color: inherit;
      background-image: linear-gradient(#e5eafb, #8b99af);
      border-left: solid 1px #cccccc;
      border-right: solid 1px #cccccc;
      border-top: solid 1px #cccccc;
      border-radius: 10px 10px 0 0;
      color: #ffffff;
      font-size: 1em;
      padding: 5px;
    }
    table#entrydata th {
      background-color: inherit;
      background-image: linear-gradient(#8b99af, #e5eafb);
      color: #ffffff;
    }
    table#entrydata th,
    table#entrydata td {
      border: solid 1px #cccccc;
      font-size: 0.8em;
      padding: 5px;
    }
    .odd {
      background-color: #e7ecf5;
      color: #444444;
    }
    .even {
      background-color: #ffffff;
      color: #444444;
    }
  </style>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
  <script>
    $(function() {
      $.getJSON("timeline.json", function(data) {
        var tblRow;
        $.each(data, function(i, f) {
          tblRow = "<tr class=";
          tblRow += (i % 2 === 0) ? "odd" : "even";
          tblRow += "><td>";
          tblRow += f.user.username;
          tblRow += "</td><td>";
          tblRow += f.content;
          tblRow += "</td><td>";
          tblRow += f.user.location;
          tblRow += "</td><td>";
          tblRow += f.date;
          tblRow += "</td></tr>";
          $(tblRow).appendTo("#entrydata tbody");
        });
      });
    });
  </script>
  <table id="entrydata">
    <caption>
      Timeline
    </caption>
    <thead>
      <tr>
        <th>UserName</th>
        <th>Message</th>
        <th>Location</th>
        <th>Time</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</body>
</html>

<强> timeline.json：

[
    {
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.",
        "date": "2014-01-04T09:28:54 +03:00",
        "likes": 745,
        "user": {
            "id": 37,
            "username": "pearson",
            "location": "Unionville, Palau",
            "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png",
            "bio": "Duis aliquip ad consectetur laborum dolor ad ut nostrud in irure. Duis magna dolore excepteur eiusmod non. Reprehenderit voluptate est culpa incididunt cillum incididunt consectetur veniam. Sit reprehenderit et dolore et laborum aliquip irure excepteur sit excepteur sit sit in. Ex incididunt Lorem adipisicing in. Ex excepteur dolor pariatur tempor do Lorem culpa pariatur ad. In in do ad nulla fugiat eiusmod adipisicing elit ipsum eiusmod nulla reprehenderit.\r\n",
            "friends": 609
        }
    },
    {
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.",
        "date": "2015-06-25T05:53:59 +03:00",
        "likes": 333,
        "user": {
            "id": 38,
            "username": "benita",
            "location": "Farmers, Tennessee",
            "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png",
            "bio": "Nulla id quis laboris ullamco aliqua cupidatat dolor aliquip excepteur sint enim eiusmod reprehenderit. Minim nostrud Lorem consequat consequat nulla commodo nulla quis officia duis. Est deserunt cupidatat non labore voluptate ipsum nulla. Id esse aliqua exercitation laborum quis dolore laboris culpa velit Lorem dolor irure pariatur quis. Aute enim aute exercitation eu cupidatat officia eiusmod ut consequat esse eu nisi.\r\n",
            "friends": 403
        }
    },
    {
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.",
        "date": "2015-03-17T09:07:29 +03:00",
        "likes": 992,
        "user": {
            "id": 39,
            "username": "fischer",
            "location": "Sunwest, Michigan",
            "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png",
            "bio": "Cupidatat id amet enim id ullamco dolor consectetur voluptate. Nisi labore minim commodo reprehenderit amet ullamco ea sit. Cillum proident pariatur cupidatat sit adipisicing et quis nostrud ut veniam mollit aute adipisicing in. Commodo est ullamco commodo voluptate consectetur minim eu ad labore sint consequat cillum.\r\n",
            "friends": 908
        }
    },
    {
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.",
        "date": "2015-08-31T07:28:57 +03:00",
        "likes": 377,
        "user": {
            "id": 40,
            "username": "carver",
            "location": "Westwood, West Virginia",
            "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png",
            "bio": "Minim id mollit nostrud velit amet sit veniam enim ut excepteur anim mollit voluptate velit. Est labore ipsum consectetur cupidatat ut ea reprehenderit ex sunt aliquip. Irure culpa proident sint commodo magna esse excepteur amet do labore pariatur amet. Do laborum commodo sint exercitation quis tempor deserunt ex fugiat elit labore laborum voluptate. Eu sunt occaecat voluptate Lorem aliqua exercitation ea aliquip. Aliqua ipsum duis eu nulla ipsum ipsum consequat consequat deserunt occaecat dolore cupidatat aute. Aute esse reprehenderit sint ad eu commodo non nulla.\r\n",
            "friends": 1
        }
    },
    {
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.",
        "date": "2015-09-14T03:35:53 +03:00",
        "likes": 672,
        "user": {
            "id": 41,
            "username": "zelma",
            "location": "Flintville, Washington",
            "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png",
            "bio": "Nulla est quis labore ipsum est mollit laborum. Cillum est mollit anim duis mollit minim in. Ipsum cillum labore ut amet culpa esse dolor amet proident irure. Ullamco sint Lorem ad ut pariatur labore in laborum anim qui non. Excepteur pariatur id labore et exercitation non. Sint sunt commodo reprehenderit mollit commodo pariatur non veniam nostrud ullamco.\r\n",
            "friends": 195
        }
    },
    {
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.",
        "date": "2014-05-07T07:40:35 +03:00",
        "likes": 462,
        "user": {
            "id": 42,
            "username": "cassandra",
            "location": "Greenfields, New Jersey",
            "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png",
            "bio": "Sit anim consectetur amet in eu. Incididunt enim voluptate labore pariatur nisi nisi occaecat exercitation incididunt proident. Officia minim sint magna adipisicing incididunt. In non exercitation laborum consequat. Officia officia eiusmod nisi culpa et ullamco. Et officia dolore id voluptate sunt cillum est laboris cupidatat tempor tempor ullamco do. Aliqua pariatur ea ea eu.\r\n",
            "friends": 640
        }
    },
    {
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.",
        "date": "2015-06-19T01:45:59 +03:00",
        "likes": 317,
        "user": {
            "id": 43,
            "username": "whitehead",
            "location": "Floris, Georgia",
            "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png",
            "bio": "Eu esse sunt ipsum labore mollit eu sunt. Aliqua labore proident amet exercitation sunt culpa duis nostrud laboris cillum esse enim esse. Duis velit exercitation minim aute proident veniam laboris adipisicing aliqua in consequat commodo. Proident reprehenderit ut deserunt eu reprehenderit magna ipsum excepteur excepteur laborum. Et sint cupidatat in velit sunt ipsum. Enim nostrud enim duis exercitation elit aute eu cupidatat.\r\n",
            "friends": 920
        }
    },
    {
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.",
        "date": "2014-11-02T05:16:09 +03:00",
        "likes": 564,
        "user": {
            "id": 44,
            "username": "avila",
            "location": "Vincent, North Dakota",
            "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png",
            "bio": "Culpa anim mollit do voluptate labore adipisicing consectetur aute nostrud velit. Magna minim nulla ea incididunt labore irure nisi velit ea nulla dolore reprehenderit duis deserunt. Pariatur aute nostrud irure eiusmod laborum enim incididunt. Minim proident velit proident excepteur irure eiusmod velit anim eiusmod. Cupidatat laborum cillum dolor aliquip ea sint. Eu quis incididunt adipisicing culpa sunt reprehenderit nostrud incididunt reprehenderit dolor. Eu incididunt incididunt ut magna dolore dolore cupidatat reprehenderit exercitation sint.\r\n",
            "friends": 764
        }
    },
    {
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.",
        "date": "2015-04-27T12:39:45 +03:00",
        "likes": 246,
        "user": {
            "id": 45,
            "username": "gardner",
            "location": "Riverton, Arizona",
            "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png",
            "bio": "Excepteur dolore reprehenderit in nisi sit sint excepteur culpa enim cillum do sit nisi laboris. Exercitation proident eiusmod reprehenderit velit tempor culpa do dolore labore. Excepteur pariatur ea velit eiusmod commodo amet commodo deserunt adipisicing aute. Id ea ea laborum aliqua dolor deserunt nisi labore id aliqua minim. Laboris esse dolore laborum labore fugiat labore exercitation enim fugiat mollit incididunt. Cupidatat nulla aliqua veniam qui. Minim duis elit Lorem dolore sit.\r\n",
            "friends": 766
        }
    },
    {
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.",
        "date": "2015-01-19T01:02:02 +03:00",
        "likes": 130,
        "user": {
            "id": 46,
            "username": "griffith",
            "location": "Sardis, California",
            "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png",
            "bio": "Adipisicing eiusmod aliqua nostrud anim cillum consectetur. Reprehenderit cupidatat cupidatat reprehenderit elit est ipsum laboris sint laboris magna laborum. Fugiat sunt ad elit voluptate quis deserunt minim commodo ex id nisi. Amet et labore eu proident ullamco nisi eu id ipsum labore incididunt consequat eu mollit. Laboris ut quis fugiat veniam occaecat. Excepteur anim ea fugiat pariatur deserunt ex Lorem veniam id esse laborum. Consectetur ad deserunt commodo ex et duis anim excepteur cillum cillum et consequat in occaecat.\r\n",
            "friends": 183
        }
    },
    {
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.",
        "date": "2014-11-22T11:21:55 +03:00",
        "likes": 318,
        "user": {
            "id": 47,
            "username": "rhea",
            "location": "Hachita, Nevada",
            "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png",
            "bio": "Aute eiusmod laboris adipisicing cupidatat aliquip exercitation cillum tempor duis adipisicing proident voluptate occaecat. Nostrud officia commodo ut ea. Amet fugiat excepteur nostrud incididunt. Nostrud enim elit amet quis. Ex ut in id qui eiusmod.\r\n",
            "friends": 852
        }
    },
    {
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.",
        "date": "2014-02-08T11:59:53 +03:00",
        "likes": 977,
        "user": {
            "id": 48,
            "username": "hyde",
            "location": "Lydia, Northern Mariana Islands",
            "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png",
            "bio": "Sint incididunt in ad adipisicing mollit non dolor velit fugiat magna id dolor. Duis esse esse id adipisicing. Tempor adipisicing dolore irure et duis sunt deserunt laboris aliqua culpa voluptate. Minim consectetur dolore do amet.\r\n",
            "friends": 747
        }
    },
    {
        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.",
        "date": "2014-03-15T03:29:25 +03:00",
        "likes": 962,
        "user": {
            "id": 49,
            "username": "barr",
            "location": "Watrous, South Carolina",
            "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png",
            "bio": "Cupidatat enim qui et adipisicing fugiat magna amet commodo duis id in. Nostrud ipsum amet fugiat id fugiat ut dolore deserunt aute anim. Consectetur duis occaecat anim excepteur deserunt ut excepteur sint quis.\r\n",
            "friends": 543
        }
    }
]

Answer 2

嗯，根据我的经验$.getJSON() 工作，即使是从file:///storage/emulated/0/www/index.html等本地文件系统打开的HTML文件：

<html>
<head><meta charset="utf-8">
<script src="jquery.js"></script>
<script>
$(function(){
$.getJSON('jsontst.js',function(d){
   var html='<table>'+
   $.map(d,function(o){
    return '<tr><td>'+$.map(
 'user.username,content,user.location,date'.split(','),
 function(p){var q=p.split('.');
  return q[1]?o[q[0]][q[1]]:o[q[0]];}).join('</td><td>')+'</td></tr>';
   }).join('\n')+'</table>';
   $('#out').html(html);
  });
});
</script>
</head>
<body>
<div id="out"></div>
</body>
</html>

jsontst.js包含OP描述的数据，与HTML文件位于同一目录中。上面的代码生成了所需的输出。

如何从JSON捕获数据并使用HTML

2 个答案: