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><he锾攒揉敫ad><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><htm盟敢势袂l> <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可以简单实现。
