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;