JavaScript入门<3>JSON
2016-10-16 13:16
387 查看
一）JSON概述
1、什么是JSON?
1）数据的传递
①数据在JavaScript范围里传递，使用Object创建对象或者创建对象的模版，两种都可用。
②数据传递到服务器端，采用一种通用的格式，Xml或者JSON。
2）JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。
3）使用名/值对的方式定义。
4）名称需要使用“”引起来。
5）多对定义之间使用“，”隔开。
例如：var obj={ "firstName":"chang", "lastName":"yanbo" };
6）相当于Java中的Map<String,obj>，最简单的创建对象的方式：var obj={ }，相当于Java中new HashMap();键值对中值为字符串才写引号（单或双），值为数值，则直接写，
例如：var obj={ name:"chang", age:23 }
注意事项：
为了简化，键值对中，键的引号可以省略，但只有在无歧义的时候才能省。当键里有“.”时，如：user.name，则必须加引号。
例如：var obj={user.name:"chang", age:23}，获取user.name所对应的值"chang"时，将会有歧义，如：var name=obj[user.name]。user.name应该是一个整体，一个字符串。而上述写法的意思就是user对象中的name属性了，所以在定义对象属性和获取属性值user.name时必须都加引号。
即var obj={"user.name":"chang", age:23}; varname=obj["user.name"];
7）相关操作：
①var name=obj["name"];//相当于obj.name，取键所对应的值
②obj["score"]=99;//放入一个新的键值对
2、如何使用JSON？
1）名称可以是属性
字符串类型的属性值，需要使用“”引起来，
2）名称可以是方法
为其赋值function对象
function testJSON(){
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();//测试对象
}
二）案例：批量提交数据和下拉框板式日历
案例1：批量提交数据
<html>
<head>
<title>addRow.html</title>
<script type="text/javascript">
function addNewRow() {//为表格添加行
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);
}
function saveData() {//保存数据
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);
};
}
</script>
</head>
<body>
<form>
<h2>批量提交数据</h2>
<input type="button" value="增加产品" onclick="addNewRow();" /><br />
<table id="table1">
<tr>
<td>产品ID</td>
<td>产品名称</td>
<td>产品价格</td>
</tr>
</table>
<br /> <input type="button" value="保存" onclick="saveData();" />
</form>
</body>
</html>
案例2：和下拉框板式日历
<!DOCTYPE html>
<html>
<head>
<title>dateChange.html</title>
<script type="text/javascript">
function initialCalendar() {//初始化日历的相关择框
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++;
}
}
function dateChanged() {//年份和月份选择改变后，修改日期下拉框
//得到所选择的年份
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++;
}
}
function getDays(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;
}
</script>
</head>
<body onload="initialCalendar();">
<h2>简易下拉框日历测试</h2><br>
<form>
<h2>下拉框版日历</h2>
<select id="selYear" onchange="dateChanged();"></select>年 <select
id="selMonth" onchange="dateChanged();"></select>月 <select
id="selDate"></select>日
</form>
</body>
</html>
1、什么是JSON?
1）数据的传递
①数据在JavaScript范围里传递，使用Object创建对象或者创建对象的模版，两种都可用。
②数据传递到服务器端，采用一种通用的格式，Xml或者JSON。
2）JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。
3）使用名/值对的方式定义。
4）名称需要使用“”引起来。
5）多对定义之间使用“，”隔开。
例如：var obj={ "firstName":"chang", "lastName":"yanbo" };
6）相当于Java中的Map<String,obj>，最简单的创建对象的方式：var obj={ }，相当于Java中new HashMap();键值对中值为字符串才写引号（单或双），值为数值，则直接写，
例如：var obj={ name:"chang", age:23 }
注意事项：
为了简化，键值对中，键的引号可以省略，但只有在无歧义的时候才能省。当键里有“.”时，如：user.name，则必须加引号。
例如：var obj={user.name:"chang", age:23}，获取user.name所对应的值"chang"时，将会有歧义，如：var name=obj[user.name]。user.name应该是一个整体，一个字符串。而上述写法的意思就是user对象中的name属性了，所以在定义对象属性和获取属性值user.name时必须都加引号。
即var obj={"user.name":"chang", age:23}; varname=obj["user.name"];
7）相关操作：
①var name=obj["name"];//相当于obj.name，取键所对应的值
②obj["score"]=99;//放入一个新的键值对
2、如何使用JSON？
1）名称可以是属性
字符串类型的属性值，需要使用“”引起来，
2）名称可以是方法
为其赋值function对象
function testJSON(){
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();//测试对象
}
二）案例：批量提交数据和下拉框板式日历
案例1：批量提交数据
<html>
<head>
<title>addRow.html</title>
<script type="text/javascript">
function addNewRow() {//为表格添加行
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);
}
function saveData() {//保存数据
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);
};
}
</script>
</head>
<body>
<form>
<h2>批量提交数据</h2>
<input type="button" value="增加产品" onclick="addNewRow();" /><br />
<table id="table1">
<tr>
<td>产品ID</td>
<td>产品名称</td>
<td>产品价格</td>
</tr>
</table>
<br /> <input type="button" value="保存" onclick="saveData();" />
</form>
</body>
</html>
案例2：和下拉框板式日历
<!DOCTYPE html>
<html>
<head>
<title>dateChange.html</title>
<script type="text/javascript">
function initialCalendar() {//初始化日历的相关择框
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++;
}
}
function dateChanged() {//年份和月份选择改变后，修改日期下拉框
//得到所选择的年份
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++;
}
}
function getDays(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;
}
</script>
</head>
<body onload="initialCalendar();">
<h2>简易下拉框日历测试</h2><br>
<form>
<h2>下拉框版日历</h2>
<select id="selYear" onchange="dateChanged();"></select>年 <select
id="selMonth" onchange="dateChanged();"></select>月 <select
id="selDate"></select>日
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript入门<3>JS外置对象：HTML DOM与Window子对象实例详解
- JavaScript入门<3>JS外置对象：Window、Document对象与DOM实例详解
- OllyDBG 入门系列<3> 函数参考
- OllyDBG 入门系列<3> 函数参考
- Ajax&Json<3>Json
- Web从入门到放弃<3>
- JavaScript<3>
- Rust之开始入门<3>
- PS入门基础<3>
- 从零开始学_JavaScript_系列（16）——CSS<3>（文本、对齐、圆角、盒模型、背景）
- 接口测试入门（3）--使用httpClient进行登录用例操作/set-cookies验证/ List<NameValuePair>设置post参数/json解析
- [原]java专业程序代写（qq:928900200），学习笔记之基础入门<javascript>（三十）
- JavaScript入门<1>基础语法
- JavaScript Json对象和Json对象字符串的关系 jsonObj<->JsonString
- OllyDBG 入门系列<3> 函数参考
- <3>OpenGL入门知识介绍
- JavaScript高级<3>
- java 从零开始，学习笔记之基础入门<javascript>（三十）
- 从零开始学_JavaScript_系列（15）——js系列<3>（转为字符串，截取字符串）
- openwrt开发<3>开发入门