您当前的位置:首页 > 计算机 > 编程开发 > JavaScript

JSON实现图片切换

时间:03-07来源:作者:点击数:

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

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

格式一:json解析得到的JS对象.键名
格式二:json解析得到的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 将有关图片的相关信息都放到一起,代码的可读性更强。

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门