任务视频V2.0

任务视频V1.0

知识点

1.什么是JSON

        JSON(JavaScriptObject Notation) 是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，用于存储和传输数据的格式，通常用于服务端向网页传递数据。同时，JSON是 JavaScript 原生格式，在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。

2.JSON的语法规则

JSON语法是 JavaScript 对象表示语法的子集，总结有以下几点：

   （1）数组（Array）用方括号(“[]”)表示。

　（2）对象（Object）用大括号（”{}”）表示。

　（3）名称/值对（name/value）之间用冒号（”：”）隔开。

　（4）名称（name）置于双引号中，值（value）有字符串、数值、布尔值、null、对象和数组。

　（5）并列的数据之间用逗号（“,”）分隔。

3.JSON对象

JSON 对象使用在大括号({})中书写，对象可以包含多个 key/value（键/值）对。

key 必须是字符串，value可以是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）；

key 和 value 中使用冒号(:)分割；

每个 key/value 对使用逗号(,)分割。

【例】创建JSON，输出userName和password的值。

<scripttype="text/javascript">

          //1.创建JSON

          var user = {

              "userName": "gky",

              "password": "123456",

              "role": "admin"

          }

              //2.访问对象的值

          console.log(user.userName);

          console.log(user["password"]);

</script>

4.JSON数组

        JSON数组在中括号中，JSON 中数组值必须是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）；

教学课件

使用JSON方式显示图书信息

任务描述

假设某图书网站，经常上新书，为了不改变页面内容，利用JSON存储图书信息，将新书信息展示在页面。

任务分析

（1） 设计静态页面。

（2） 使用JSON存储图书信息。

（3） 页面加载时，遍历JSON数据，并将JSON数据渲染到页面

任务实现

<script type="text/javascript">

   var book=[

          {"bookSrc":"images/简爱.png","bookId":"b001","bookName":"简爱","publish":"万卷出版公司","price":"32.00元"},

          {"bookSrc":"images/老人与海.png","bookId":"b002","bookName":"老人与海","publish":"万卷出版公司","price":"38.00元"},

          {"bookSrc":"images/小王子.png","bookId":"b003","bookName":"小王子","publish":"万卷出版公司","price":"28.00元"}

          ]                 

      for(var i in book){           

      document.getElementById("pic"+i).src=book[i].bookSrc;

document.getElementById("bookId"+i).innerHTML="图书编号："+book[i].bookId;

       document.getElementById("bookName"+i).innerHTML="图书名称："+book[i].bookName;

       document.getElementById("publish"+i).innerHTML="出版社："+book[i].publish;

       document.getElementById("price"+i).innerHTML="图书价格:"+book[i].price; }         

</script>

案例素材

使用JSON方式实现省市级联效果

参考答案