如何获取 JSON 并使用 jQuery 将其推送到 HTML 中？答案

【问题标题】：How do I get JSON and push it into HTML with jQuery?如何获取 JSON 并使用 jQuery 将其推送到 HTML 中？
【发布时间】：2013-10-13 10:32:12
【问题描述】：

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

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

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

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

【问题讨论】：

对我来说，“简单的方法”是使用 Knockout。但是，无论您使用哪种模板/视图引擎，都应该能够支持绑定到 [复杂] 模型 - 请记住，JSON 只是文本，但相应的 JavaScript 对象只是一个 JavaScript 对象。（如果正确指定了数据类型，jQuery 将自动进行转换。如果您将“JSON 放入 HTML”，那么您实际上是在页面源中放入了普通的 JavaScript 对象文字。）
api.jquery.com/jQuery.getJSON
我喜欢Knockout 中的data-bind。我认为这是正确的方式。

标签： javascript jquery ajax json template-engine

【解决方案1】：

真的取决于返回的 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 />');
}

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

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

<body>
    ...
    All of your HTML
    ...
    <script src="jquery.js"></script>
    <script src="yourfile.js"></script>
</body>

【讨论】：