我的书签
添加书签
移除书签11.4.2 复杂的JSON对象
我们可以使用对象直接量作为一个JSON对象中的值，换句话说，对象直接量嵌套在对象直接量中，从而创建甚至更为复杂的信息集合（对不起，但是不要就此放下本书）。
这里有一个例子。假设我们希望服务器使用JSON送回多个人的联络信息。我们将向名为contacts.php的文件发送一个请求，带上一个查询字符串，指明希望返回多少个联络人的信息。代码可能如下所示：
$.getJSON（'contacts.php'，'limit=2’，processContacts）；
limit=2是发送给服务器的信息，它表示应该返回多少个联络人的信息。Web服务器随后将返回两个联络人的信息。假设第一个人的联系信息和上面的例子相同（Frank Smith），第二个人的联络信息是如下所示的另一个JSON对象：
{
firstName：'Peggy'，
lastName：'Jones'，
phone：’415-555-5235’
}
Web服务器可能返回表示一个单个JSON对象的字符串，它组合了这两个对象，如下所示：
{
contact1：{
firstName：'Frank'，
lastName：'Smith'，
phone：’503-555-1212’
}，
contact2：{
firstName：'Peggy'，
lastName：'Jones'，
phone：’415-555-5235’
}
}
假设回调函数接收了一个名为data的单个参数（例如，函数processContacts-（data））。变量data将会随后分配给该JSON对象，就好像执行了如下的代码：
var data={
contact1：{
firstName：'Frank'，
lastName：'Smith'，
phone：’503-555-1212’
}，
contact2：{
firstName：'Peggy'，
lastName：'Jones'，
phone：’415-555-5235’
}
}；
现在，我们可以在回调函数中访问第一个联络人对象的信息，如下所示：
data.contact1
并且像下面这样访问第一个联络人的名字：
data.contact1.firstName
但是，在这个例子中，由于我们想要处理多个联络人，因此jQuery提供了一个函数允许遍历JSON对象中的每个项目，这就是each（）函数。其基本的结构是：
$.each（JSON, function（name, value）{
}）；
我们给each（）函数传递了JSON对象以及一个匿名函数（参见2.10.1节）。这个匿名函数接收JSON对象中的每个项目的名字和值。下面是在当前的例子中使用JSON对象的样子：
1$.getJSON（'contacts.php'，'limit=2’，processContacts）；
2 function processContacts（data）{
3//create variable with empty string
4 var infoHTML=’’；
5
6//loop through each object in the JSON data
7$.each（data, function（contact, contactInfo）{
8 infoHTML+=’＜p＞Contact：’+contactInfo.frstName；
9 infoHTML+=’’+contactInfo.lastName+’＜br＞’；
10 infoHTML+='Phone：’+contactInfo.phone+’＜/p＞’；
11}）；//end of each（）
12
13//add finished HTML to page
14$（'#info'）.html（infoHTML）；
15}
代码分解分析如下：
1.第1行创建了Ajax请求，并且指定了回调函数。
2.第2行创建了回调函数，它接收服务器送回的JSON对象并将其存储到变量data中。
3.第4行创建了一个空字符串。最终添加到页面的HTML将填充该字符串。
4.第7行是each（）函数，它将会遍历JSON数据中的对象。
each（）函数接收JSON对象作为其第一个参数（data），接收一个匿名函数作为其第二个参数。过程如图11-10所示。基本上，对于主对象中的每个对象（在这个例子中是contact1和contact2），该匿名函数都接收作为字符串的该对象的名字（即第7行中列出的contact参数）以及该对象的值（即contactInfo参数）。在这个例子中，contactInfo变量将保存包含了联络信息的对象直接量。
图 11-10 可以使用jQuery的each（）函数来遍历一个JSON对象，以便在每一个嵌套的对象上执行任务。也可以使用each（）函数来遍历数组。要了解关于这个有用的函数的更多信息，请访问http：//docs.jquery.com/Utilities/jQuery.each#objectcallback
5.第8～10行从一个联络人中提取信息。
还记得吗？each（）函数是一个循环，因此，第8～10行对于每个联络人运行两次。
6.第14行通过把HTML添加到页面来更新Web页面。
最终的结果是如下的HTML：
＜p＞Contact：Frank Smith＜br＞
Phone：503-555-1212＜/p＞
＜p＞Contact：Peggy Jones＜br＞
Phone：415-555-5235＜/p＞
