js中的枚举其实就是这个json格式的数据，也就是键值对存在的数据。
工具/原料
- 电脑
- 前端编辑器
方法/步骤
- 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可以简单实现。
