当你需要根据服务器返回的数据来动态改变页面的时候，应用程序接口(API)就派上用场了。
记住，API——应用程序接口(Application Programming Interface)是计算机之间相互交流沟通的工具。
许多网站的应用程序接口(API)都是通过一种称为JSON格式的数据来传输的，JSON 是 JavaScript Object Notation的简写。
其实如果你曾经创建过JS对象的话，你就已经使用了这种数据格式，JSON是一种非常简洁的数据格式。
它通常表现为了两种形式，一种为单个对象，一种为多个对象
单个对象类似于：{name:‘盖伦‘,advantage:‘单挑无敌‘}
多个对象类似于：[{name:‘盖伦‘,advantage:‘单挑无敌‘},{name:‘诺克‘,advantage:‘上单霸主‘}]
每个对象属性和属性值的组合就是我们经常听到的"键值对(key-value pairs)"。
让我们从之前的猫图API拿取数据吧。
你应该在你的点击事件中加入如下的代码：
<script> ?$(document).ready(function() { ???$("#getMessage").on("click", function(){ ?????// 请把你的代码写在这条注释以下 ????$.getJSON("/json/cats.json", function(json) { ?$(".message").html(JSON.stringify(json));}); ????// 在这之后，点击"Get Message"按钮。你的Ajax函数将把文字"The message will go here"替换成此从FreeCodeCam的猫图API中获得的原始JSON数据。 ?????// 请把你的代码写在这条注释以上 ???}); ?});</script><div class="container-fluid"> ?<div class = "row text-center"> ???<h2>Cat Photo Finder</h2> ?</div> ?<div class = "row text-center"> ???<div class = "col-xs-12 well message"> ?????The message will go here ???</div> ?</div> ?<div class = "row text-center"> ???<div class = "col-xs-12"> ?????<button id = "getMessage" class = "btn btn-primary"> ???????Get Message ?????</button> ???</div> ?</div></div>我们已经从JSON API中获得了数据，现在把它们展现到我们的HTML页面中吧。
这里，我们使用.forEach()函数来循环遍历JSON数据写到htmll变量中。
首先我们定义一个HTML变量，var html = ""; 。
然后，我们使用.forEach()函数来循环遍历JSON数据写到html变量中，最后把html变量显示到我们的页面中。
整个过程的代码如下：
$.getJSON("/json/cats.json", function(json) { ???????var html = ""; ???????// 请把你的代码写在这条注释以下 ???????json.forEach(function(val){ ?????????var keys = Object.keys(val); ?????????html += "<div class = ‘cat‘>"; ?????????keys.forEach(function(key){ ???????????html +="<b> + key + </b>:" + val[key] + "<br>" ?????????}); ?????????html += "</div><br>"; ???????}); ???????????????????????// 请把你的代码写在这条注释以上提示：示例中难点在于两个forEach循环，而且里面夹杂有字符串拼接，这是最头疼也最容易出错的地方
Get JSON with the jQuery getJSON Method
原文地址：http://www.cnblogs.com/geshangjing/p/8093274.html