JSON实现图片切换

本节主要介绍  JSON 与对象的应用，实现图片切换，在进行图片切换之前，必须了解如何获取 JOSN 中的各个值。要获取 JSON 中的各个值，需要首先将 JSON 解析为 JS 对象，然后再通过该对象引用键名来获取对应的值。

通过解析得到的 JS 对象，可以采用以下两种格式来获取值。

例如：

var json = '{"company":"XXX公司", "ceo":{"firstName":"Jason",'+
           '"lastName":"Hunter"}}';//定义一个JSON
var obj = JSON.parse(json);//将JSON解析为JS对象

obj.company; //访问company键名，返回：XXX公司
obj.ceo.firstName;//访问ceo键对应的对象的firstName属性值，返回：Jason
obj['ceo']['firstName'];//访问ceo键对应的对象的firstName属性值，返回：Jason
obj['ceo']['firstName'];//访问ceo键对应的对象的firstName属性值，返回：Jason

下面，我们使用 JSON 修改“JS数组实现图片切换”一节中的例 1，将例 1 中的两个数组修改为 JSON 的两个条目。具体代码如下所示（为节省篇幅，在此主要列出修改的代码）。

【例 1】使用 JSON 设置切换图片路径及图片描述信息。

<script>
  window.onload = function(){
     …
     //使用JSON存储切换的图片路径和图片描述信息
     var json = '{"url":["images/1.jpg","images/2.jpg","images/3.jpg",'+
                  '"images/4.jpg"],"text":["可爱的小猫咪","调皮的皮卡丘",'+
                  '"呆萌的皮卡丘","超酷的小熊"]}';
     var imgData = JSON.parse(json);//将json解析为JS对象

     var num = 0;
     //初始化图片信息
     oSpan.innerHTML = num+1 + '/' + imgData.url.length;
     oImg.src = imgData.url[num];
     oText.innerHTML = imgData.text[num];
     //单击向前链接事件
     oPrev.onclick = function(){
         …
       oImg.src = imgData.url[num];
         oText.innerHTML = imgData.text[num];
        oSpan.innerHTML = num+1 + '/' + imgData.url.length;
     }
    
      //单击向后链接事件
     oNext.onclick = function(){
          num++
          if(num == imgData.url.length){
               num = imgData.url.length-1;
               alert("这是最后一张图片");
         }
         oImg.src = imgData.url[num];
         oText.innerHTML = imgData.text[num];
            oSpan.innerHTML = num+1 + '/' + imgData.url.length;
     }
   }    
</script>

细心的读者可能会对上述示例使用 JSON 感到疑惑：就该示例来说，似乎直接使用对象会更直接一些，因为至少不需要对 JSON 的解析啊。就这个示例来说确实是这样的。但需要注意的是，在实际工作中，我们需要处理的数据，如示例中的图片路径和名字可能来源于其他地方，比如通过 HTTP 请求的后端数据。

这些后端数据有可能是对象或数组，后端要和前端交换这些数据，就需要使用 JSON 对它们进行转换：在后端将对象转换为 JSON 然后进行传送；前端接收到的数据为 JSON，然后通过对解析 JSON 得到 JS 对象，之后前端就可以直接对 JS 对象进行操作了。可见，通过 JSON，在前端就实现了对后端对象的操作。

上述代码修改后的运行结果和“JS数组实现图片切换”一节中的例 1 完全一样。但使用 JSON 将有关图片的相关信息都放到一起，代码的可读性更强。