2

我有 HTML 页面，我决定使用从 API (api.example.com) 生成的 JSON 来填充它们。

问题是我从未使用过 jQuery。使用 jQuery 提取信息然后用 JSON 数据（例如姓名、姓氏、消息）填充 HTML 的基础是什么？

我应该将 JavaScript 代码放在 HTML 页面的末尾（就在之前）吗？

或者，有没有简单的方法？

4

1 回答 1

4

真的取决于 json 看起来像什么回来。

首先使用 ajax 获取数据。

var incomingData; //Incoming Data Variable

$.ajax("http://yourURL.goes.here", {
  type: "GET",
  dataType: "json",
  success: function(data) {
    incomingData = data;
  },
  error: function(req, status, err) {
    //console.error("Something went wrong! Status: %s (%s)", status, err);
  }
});

现在您将在incomingData变量中保存数据。

我会 console.log 数据，所以你可以查看它，但访问这些部分将通过 DOT 表示法完成：

incomingData.name;
incomingData.phone;

通常当你返回 JSON 时你会得到一个对象数组，所以你可能需要循环遍历。

for(var i = 0; i < incomingData.length; i++) {
    console.log(incomingData[i]);
    $('.yourClass').append(incomingData[i].name + '<br />');
}

以上将采用“名称”属性的值并将其附加到您<div class="yourclass"></div>的 html 中。它还将控制台记录您在控制台中迭代的对象，以便您应该能够看到它的所有属性。起初令人困惑，但必要的 JS 技能。:)

至于将代码放在哪里，最佳实践是在结束正文标记之前。确保在加载 jquery 后您的代码正在运行。创建一个 main.js 文件并将其包含在您的正文结束标记之前：

<body>
    ...
    All of your HTML
    ...
    <script src="jquery.js"></script>
    <script src="yourfile.js"></script>
</body>
于 2013-10-06T23:06:16.653 回答