js 枚举怎么用
1、第一步:json的定义。
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。同时,JSON是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。
本文主要是对JS操作JSON的要领做下总结。
在JSON中,有两种结构:对象和数组。
1. 一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’ 对”之间运用 “,”(逗号)分隔。 名称用引号括起来;值如果是字符串则必须用括号,数值型则不须要。例如:
var o={"xlid":"cxh","xldigitid":123456,"topscore":2000,"topplaytime":"2009-08-20"};
2. 数组是值(value)的有序集合。一个数组以“[”(左中括号)开始,“]”(右中括号)结束。值之间运用 “,”(逗号)分隔。
2、第二步:json应用之级联下拉框。
具体代码如下所示:
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>json数据下拉框</title>
</head>
<body>
<h2>省市联动框</h2>
省:<select id="selector" onchange=selectorChange(this.value)></select>
市:<select id="selector2"></select>
<script type="text/javascript">
var sheng = '{"广东省key":"广东省","河南省key":"河南省","河北省key":"河北省"}';
var shi = {
"广东省key":{"gkey1":"广州市","gkey2":"深圳市"},
"河南省key":{"hkey1":"郑州市","hkey2":"周口市"},
"河北省key":{"bkkey":"石家庄"}
};
//将json字符串转为json数据
var obj = JSON.parse(sheng);
var selector = document.getElementById("selector");
var selector2 = document.getElementById("selector2");
window.onload = function(){
for(var key in obj){
var opt = document.createElement("option");
opt.value = key;
opt.innerText = obj[key];
selector.appendChild(opt);
}
//获取广东省的市区,设置市区的默认值
var ds = shi["广东省key"];
for(var key in ds){
//初始化市下拉框
var opt2 = document.createElement("option");
opt2.value = key;
opt2.innerText = ds[key];
selector2.appendChild(opt2);
}
}
//动态设置市下拉框
function selectorChange(value) {
//首先清楚旧数据
selector2.options.length=0;
//根据省获取市的下拉框
var ds = shi[value];
for(var key in ds){
//初始化市下拉框
var opt2 = document.createElement("option");
opt2.value = key;
opt2.innerText = ds[key];
selector2.appendChild(opt2);
}
}
</script>
</body>
</html>


3、第三步:测试省市级联。
打开网页--查看默认市级下拉框--》在分别选择河南省和河北省查看市级下拉框的变化。结论是市级下拉框会随省的改变而改变。具体操作结果如下图所示:





4、第四步:当做面向对象的实体类使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script>
//定义学生小明
var student ={name:"小明",sex:"男",age:"10"};
console.log("name:"+student.name+" sex:"+student.sex)
//定义多个学生,也就是学生数组
var students = [
{name:"小亮",sex:"男",age:"11"},
{name:"小美",sex:"女",age:"12"}
];
console.log("-----------------------------获取第一个小亮 信息--------------------------------")
var xiaoliang = students[0];
console.log("name:"+xiaoliang.name+" sex:"+xiaoliang.sex)
//声明一个空的json数据
var testJson = {};
testJson.student = student;
testJson.students = students;
console.log(testJson)
//新增
testJson.student.test = {test:"测试"};
testJson.students.push(student);
console.log(testJson)
//修改
testJson.student.test={test:"测试2"}
console.log(testJson)
//删除
delete testJson.student["test"];
console.log(testJson)
//移除数组中所有json数据
//testJson.students.splice(0,testJson.students.length);
console.log(testJson)
</script>
</html>


5、第五步:前后台数据交互。
ajax返回数据时将后台数据转为json传到前台,便于使用。springmvc则直接通过注解@RestController,@ResponseBody可以简单实现。
