json教程从入门到使用_H5之家 - 中国HTML5教程资源分享第一站

json教程从入门到使用一：入门简介：

JSON（JavaScriptObject Notation）、轻量级数据交换格式、非常适合于服务器与 JavaScript 的交互。

JSON两种格式： 1、对象

对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。

2、数组

数组是值（value）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间使用“,”（逗号）分隔。

（具体格式可参照、这里只做简略介绍、下方会贴出具体相关）

javascript中的JSON相关：一：对象型JSON

二：数组型JSON $(document).ready(function showStudent(){ varstudent = [ {"sno":"001","name":"jack","age":130}, {"sno":"002","name":"tame","age":120}, {"sno":"003","name":"cule","age":110}, ]; //以下是两种获取值的方法 document.write('sno:' + student[0].sno + ' name:' +student[0].name +' age :' +student[0].age +' '); document.write('sno:' + student[0]["sno"] + ' name:' + student[0]["name"] +' age :' + student[0]["age"]+' ' ); document.write('sno:' + student[1]["sno"] + ' name:' + student[1]["name"] +' age :' + student[1]["age"]+' ' ); document.write('sno:' + student[1]["sno"] + ' name:' + student[1]["name"] +' age :' + student[1]["age"]+' ' ); document.write('sno:' + student[2]["sno"] + ' name:' + student[2]["name"] +' age :' + student[2]["age"]+' ' ); document.write('sno:' + student[2]["sno"] + ' name:' + student[2]["name"] +' age :' + student[2]["age"]+' ' ); });

三：相互嵌套（仅举一种、可自己弄着玩试试） $(document).ready(function showStudent(){ varstudent = { "sno":"001", "name":"jack", "age":130, "address": [ {"pro":"anhui","city":"fuyang"}, {"pro":"jiangsu","city":"nanjing"} ] } document.write('sno:' + student.sno + ' name:' + student.name +' age :' + student.age +' pro :' + student.address[0].pro +' city :' + student.address[0].city+' ' ); });

补充：至于JSON为什么能这样取得数据的值？ It is based on a subset of the , StandardECMA-262 3rd Edition - December 1999. 它是javascript的一个子集、javascript会对其进行解析（如何实现暂不理会）。

四：json格式的字符串、和json对象（对于什么时候称作json对象不做深究）的区别：

很简单：json格式的字符串、很明显就是一个字符串、只具有字符串的特性和功能。只是格式上看起来像json对象而已、而不具有json对象所具有的功能（比如上面的例子中拿到student对象的某个属性的值、上面是String的话、student.sno能获得sno的值吗？某老师的话：自己动手试试……）。

$(document).ready(function showStudent(){ var student = { "sno":"001", "name":"jack", "age":130, "address": [ {"pro":"anhui","city":"fuyang"}, {"pro":"jiangsu","city":"nanjing"} ] } document.write('sno :' + student.sno + ' name:' + student.name +' age :' + student.age +' pro :' + student.address[0].pro +' city :' + student.address[0].city +' ' ); });

注意：别把

typeof(studentJson)+' 
'写成 typeof(studentJson +' ')

这样就成了JSON对象与String拼接了、结果会变成两个string…

JSON格式Str与JSON对象之间的转换一：Object转换成JSONStr

$(document).ready(function Object2JSONString(){ var student = new Student("001","chy"); var studentJson = student.toJSONString(); document.write(typeof(studentJson) + ' '); document.write(studentJson + ' '); }); //toJOSNString() 可以把json格式的字符串或者Object转换成json对象 function Student(sno, name){ this.sno = sno; this.name = name; }

二：JSONStr转换成JSON对象

$(document).ready(function str2json () { var studentStr = '{"sno":"001","name":"jack","age":123}'; //不推荐、存在安全隐患 var studentJson = eval('('+studentStr+')'); //缺陷：不能适用于所有的浏览器 var studentJson2 = JSON.parse(studentStr); //需下载jquery.json-2.4.js、未实现 //var studentJson3 = jQuery.toJSON(studentStr); //document.write(typeof(studentJson3)+' ' ); document.write(typeof(studentStr) +' ' ); document.write(typeof(studentJson)+' ' ); document.write(typeof(studentJson2)+' ' ); })

三：JSON对象转换成JSONStr $(document).ready(function json2str () { var studentJson = {"sno":"001","name":"jack","age":123}; //toJSONString()方法需要借助json.js文件（可去官方网站下载） var studentStr = studentJson.toJSONString(); var studentStr2 = JSON.stringify(studentJson); document.write(studentStr +' ' ); document.write(studentStr2 +' ' ); document.write(typeof(studentStr) +' ' ); document.write(typeof(studentJson)+' ' ); }) JSON遍历四种遍历方式： <!DOCTYPE HTML> <html> <script src="jquery.min.js"></script> <script type="text/javascript"> function firstMethod(){ var list1 = [1,3,4]; document.write(list1[1]+' '); var list2 = [{"name":"leamiko","xing":"lin"}]; document.write(list2[0]["xing"]+' '); document.write(list2[0].xing+' '); document.write("==========================================================="+' '); } function secondMethod(){ var value = { "china": { "hangzhou":{"item":"1"}, "shanghai":{"item":"2"}, "chengdu":{"item":"3"} }, "America": { "aa":{"item":"1"}, "bb":{"item":"2"} }, "Spain": { "dd":{"item":"1"}, "ee":{"item":"2"}, "ff":{"item":"3"} } }; //向里循环的时候只能用external[internal][deeperinternal]...而不能用external.internal.deeperinternal...原因不知道。。。当json类型是｛...｝时for(var x in value)x指的是每一个值、当json类型是[]时 x指的是数组下标。根据情况利用 for(var country in value){ document.write(country +': '); for(var city in value[country]){ document.write(' '+city+':'); for(var item in value[country][city]){ document.write(' '+value[country][city][item]+':'); } } } document.write("==========================================================="+' '); } function thirdMethod(){ var value = { "china": [ {"name":"hangzhou", "item":"1"}, {"name":"shanghai", "item":"2"}, {"name":"sichuan", "item":"3"} ], "America": [ {"name":"aa", "item":"12"}, {"name":"bb", "item":"2"} ], "Spain": [ {"name":"cc", "item":"1"}, {"name":"dd", "item":"23"}, {"name":"ee", "item":"3"} ] }; for(var country in value){ document.write(country+' '); for(var x in value[country]){ document.write('cityname: ' + value[country][x]["name"] + ' item: ' + value[country][x]["item"] + ' '); } } document.write("==========================================================="+' '); } function fourthMethod(){ var value = { "china": [ {"name":"hangzhou", "item":"1"}, {"name":"shanghai", "item":"2"}, {"name":"sichuan", "item":"3"} ], "America": [ {"name":"aa", "item":"12"}, {"name":"bb", "item":"2"} ], "Spain": [ {"name":"cc", "item":"1"}, {"name":"dd", "item":"23"}, {"name":"ee", "item":"3"} ] }; for(var country in value){ document.write(country+' '); for(var i=0; i<value[country].length; i++){ document.write('cityname: ' + value[country][i]["name"] + ' item: ' + value[country][i]["item"] + ' '); } } document.write("==========================================================="+' '); } $(document).ready=firstMethod(); $(document).ready=secondMethod(); $(document).ready=thirdMethod(); $(document).ready=fourthMethod(); </script> <body> </body> </html> JSON在struts2中的使用

说白了、json在java web项目中的应用本质就是客户端请求到服务端、服务端将数据处理成json格式返回给客户端、客户端再根据返回的数据进行下一步操作。。。采用json就

是因为json更容易和快速的被解析、我们又可以根据自己的需要在后台设定好数据格式、这样在前台可以直接拿来用或者加工一下。。。。

（最好是下个能直接用的项目、然后自己动手多试、自己搭、如果jar包冲突、搞了半天没解决、什么激情也没有了、还什么都没有干、、、）

只搞一种、有时间补充：

1、jar包

commons-beanutils-1.7.0.jar

commons-fileupload-1.2.1.jar

commons-io-1.3.2.jar

commons-lang-2.3.jar

commons-logging-1.0.4.jar

ezmorph-1.0.3.jar

freemarker-2.3.15.jar

json-lib-2.1.jar

ognl-2.7.3.jar

struts2-core-2.1.8.1.jar

struts2-json-plugin-2.1.8.1.jar

xwork-core-2.1.6.jar