JavaScript入门<3>JSON

最新推荐文章于 2024-04-30 16:57:21 发布

xiu2016

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量246

点赞数

文章标签： javascript json

本文链接：https://blog.csdn.net/xiu2016/article/details/52829986

版权

一）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="增加产品" οnclick="addNewRow();" /><br />
		<table id="table1">
			<tr>
				<td>产品ID</td>
				<td>产品名称</td>
				<td>产品价格</td>
			</tr>
		</table>
		<br /> <input type="button" value="保存" οnclick="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 οnlοad="initialCalendar();">
	<h2>简易下拉框日历测试</h2><br>
	<form>
		<h2>下拉框版日历</h2>
		<select id="selYear" οnchange="dateChanged();"></select>年 <select
			id="selMonth" οnchange="dateChanged();"></select>月 <select
			id="selDate"></select>日
	</form>
</body>
</html>