javascript（九）JSON

9.1 概述

1）数据的传递

①数据在JavaScript范围里传递，使用Object创建对象或者创建对象的模版，两种都可用。

②数据传递到服务器端，采用一种通用的格式，Xml或者JSON。

2）JSON（JavaScriptObject Notation）是一种轻量级的数据交换格式。

3）使用名/值对的方式定义。

4）名称需要使用“”引起来。

5）多对定义之间使用“，”隔开。

例如：var obj={       "firstName":"chang",      "lastName":"yanbo"        };

6）相当于Java中的Map<String,obj>，最简单的创建对象的方式：varobj={ }，相当于Java中new HashMap();键值对中值为字符串才写引号（单或双），值为数值，则直接写，

例如：varobj={  name:"chang",  age:23 }

u  注意事项：

v  为了简化，键值对中，键的引号可以省略，但只有在无歧义的时候才能省。当键里有“.”时，如：user.name，则必须加引号。

v  例如：varobj={user.name:"chang", age:23}，获取user.name所对应的值"chang"时，将会有歧义，如：varname=obj[user.name]。user.name应该是一个整体，一个字符串。而上述写法的意思就是user对象中的name属性了，所以在定义对象属性和获取属性值user.name时必须都加引号。

v  即var obj={"user.name":"chang",  age:23};         varname=obj["user.name"];

7）相关操作：

①var name=obj["name"];//相当于obj.name，取键所对应的值

②obj["score"]=99;//放入一个新的键值对

9.2名称可以是属性

字符串类型的属性值，需要使用“”引起来。

9.3名称也可以是方法

为其赋值function对象

例如：functiontestJSON(){

              var obj={       "name":"changyanbo",   "age":"23",

                     "introduce":function(){//一般不需要定义方法，因为主要是为了数据交换的

                              var info = "i am " +this.name + ",i am " + this.age + " years old.";

                              alert(info);                    }                         };

              alert(obj.name);    alert(obj.age);      obj.introduce();//测试对象             }

9.4案例：批量提交数据和下拉框版式日历

eg1：批量提交数据

<form>  <h2>批量提交数据</h2>

        <inputtype="button" value="增加产品"οnclick="addNewRow();" /><br />

             <tableid="table1">

                    <tr>  <td>产品ID</td><td>产品名称</td><td>产品价格</td>  </tr>                   </table><br />

        <inputtype="button" value="保存"οnclick="saveData();"/>                    </form>

functionaddNewRow() {//为表格添加行

    var table =document.getElementById("table1");//得到表格对象

    var row =table.insertRow(table.rows.length);//创建新行

    var idCell = row.insertCell(0);//为行创建id单元格

    var input1 =document.createElement("input");

    idCell.appendChild(input1);

    var nameCell = row.insertCell(1);//为行创建name单元格

    var input2 =document.createElement("input");

    nameCell.appendChild(input2);

    var priceCell = row.insertCell(2);//为行创建price单元格

    var input3 =document.createElement("input");

    priceCell.appendChild(input3);                                                                                                      }

functionsaveData() {//保存数据

    var datas = new Array();//定义数组，用于存储数据

    var table =document.getElementById("table1");//循环表格，并收集数据

    for (var i = 1; i < table.rows.length;i++) {//获得页面的数据

        var id =table.rows[i].cells[0].firstChild.value;

        var name =table.rows[i].cells[1].firstChild.value;

        var price =table.rows[i].cells[2].firstChild.value;

        var o = new Data(id, name,price);//定义对象以封装数据

        datas[i - 1] = o;                                                   }

    for (var i = 0; i < datas.length; i++){//提交数据（测试数据）

        datas[i].show();                                                 }                                                                }

function Data(id,n, p) {//自定义对象

    this.id = id;//属性             this.name = n;          this.price = p;

    this.show = function () { //方法

        alert("id:" + this.id +"\nname:" + this.name + "\nprice:" + this.price);    };   }

eg2：下拉框版式日历

<bodyοnlοad="initialCalendar();">

    <form> <h2>下拉框版日历</h2>

        <select id="selYear" οnchange="dateChanged();"></select>年

        <select id="selMonth"οnchange="dateChanged();"></select>月

        <selectid="selDate"></select>日                                             </form>        </body>

functioninitialCalendar() {//初始化日历的相关择框

    var startYear = 2005; //定义开始年份

    var index = 0;//声明option对象的索引

    //初始化年份选择框

    var yearObj =document.getElementById("selYear");

    var endYear = (new Date()).getFullYear();

    for (var i = startYear; i <= endYear;i++) {

        var optionObj = new Option(i,i);

        yearObj.options[index] = optionObj;                 index++;                }

    //初始化月份选择框

    var monthObj =document.getElementById("selMonth");

    index = 0;

    for (var i = 1; i <= 12; i++) {

        var optionObj = new Option(i,i);

        monthObj.options[index] = optionObj;             index++;                     }

    //初始化日期选择框

    var dateObj =document.getElementById("selDate");

    index = 0;

    for (var i = 1; i <= 31; i++) {

        var optionObj = new Option(i,i);

        dateObj.options[index] = optionObj;                 index++;                     }                           }

functiondateChanged() {//年份和月份选择改变后，修改日期下拉框

    //得到所选择的年份

    var yearObj =document.getElementById("selYear");

    var year =yearObj.options[yearObj.selectedIndex].value;

    //得到所选择的月份

    var monthObj =document.getElementById("selMonth");

    var month = monthObj.options[monthObj.selectedIndex].value;

    //得到当月最大天数

    var days = getDays(year, month);

    //删除原有天数

    var dateObj =document.getElementById("selDate");

    dateObj.options.length = 0;

    //重新添加天

    var index = 0;

    for (var i = 1; i <= days; i++) {

        var optionObj = new Option(i, i);

        dateObj.options[index] = optionObj;                 index++;       }                                    }

functiongetDays(year, month) {//获得某年某月的总天数

    if (month == 2) {

        var isLeap = (year % 4 == 0 &&year % 100 != 0) || year % 400 == 0;

        return isLeap ? 29 : 28;                                                                                                     }

    else if (month == 4 || month == 6 || month== 9 || month == 11)     return 30;

    else    return 31;