JSON实例应用.docx

1. Json实现页面多个对象的保存以前在页面上要保存多个对象时，我一般在页面用js把这些数据组装起来，然后到服务器再自己写方法解析，比如下面这个页面： 男 女 男 女 男 女 nage,age,sex对应Person对象的三个属性，也就是要保存三个对象到数据库中。假设页面上三个对象的属性值分别为tom 20 1, jacky 21 0, lily 22 1.则在js中通过','将这些值分隔,组装的字符串为(tom,20,1):(jacky,21,0):(lily,22,1)把这个值赋给userObj,并传到服务器上。在服务器端的解析代码大致为：()String str = request.getParameter(userObj);String strArray = str.split(:);Person person = new Person();for(String obj : strArray) String personArray = obj.split(,); person.setName(personArray0); person.setAge(personArray1); person.setSex(personArray2); personService.insert(person);但这样实现有个漏洞，就是当页面输入框中包含','时，那服务器解析时就不能将正确的值赋给person对象。这几天研究了下json，就可以避免这个问题。而且js和服务器端代码可以缩减很多。json java解析有十几种，我用的是json-lib,觉得他功能比较强大，有关它的语法官网上介绍得很详细，在这就不多说了，可以参考/json数据格式很简单，比如name:tom,age:20,sex:1就表示一个person对象。详细可以参考json官网在js中我把几个preson对象组装成一个数组,并把这个字符串赋给userObj然后提交表单.var objs = name:tom,age:20,sex:1,name:jacky,age:21,sex:,name:lily,age:22,sex:1document.getElementById(userObj).value = objs;document.formsuserForm.submit();在服务器端的解析代码为：String str = request.getParameter(userObj);List persons = new ArrayList();if (str != null & !.equals(str) list = getList(str,new Person();for(Person p : list) personService.insert(p);下面是封装的方法SuppressWarnings(unchecked)public List getList(String str,T t) JSONArray array = JSONArray.fromObject(str);/将str转换成json对象 JsonConfig jsonConfig = new JsonConfig();/参数设置 jsonConfig.setRootClass(t.getClass();/设置array中的对象类型 List list = (List)JSONArray.toCollection(array, jsonConfig);/将数组转换成T类型的集合 return list;2. JS操作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）的有序集合。一个数组以“”（左中括号）开始，“”（右中括号）结束。值之间运用 “,”（逗号）分隔。 例如： var jsonranklist=xlid:cxh,xldigitid:123456,topscore:2000,topplaytime:2009-08-20,xlid:zd,xldigitid:123456,topscore:1500,topplaytime:2009-11-20; 为了方便地处理JSON数据，JSON提供了json.js包，下载地址：/json.js 在数据传输流程中，json是以文本，即字符串的形式传递的，而JS操作的是JSON对象，所以，JSON对象和JSON字符串之间的相互转换是关键。例如： JSON字符串: var str1 = name: cxh, sex: man ; JSON对象: var str2 = name: cxh, sex: man ; 一、JSON字符串转换为JSON对象 要运用上面的str1，必须运用下面的要领先转化为JSON对象： /由JSON字符串转换为JSON对象 var obj = eval( + str + );或者 var obj = str.parseJSON(); /由JSON字符串转换为JSON对象 或者 var obj = JSON.parse(str); /由JSON字符串转换为JSON对象 然后，就可以这样读取： Alert(); Alert(obj.sex); 特别留心：如果obj本来就是一个JSON对象，那么运用 eval（）函数转换后（哪怕是多次转换）还是JSON对象，但是运用 parseJSON（）函数处理后会有疑问（抛出语法异常）。 二、可以运用 toJSONString()或者全局要领 JSON.stringify()将JSON对象转化为JSON字符串。 例如： var last=obj.toJSONString(); /将JSON对象转化为JSON字符 或者 var last=JSON.stringify(obj); /将JSON对象转化为JSON字符 alert(last); 留心： 上面的多个要领中，除了eval()函数是js自带的之外，其他的多个要领都来自json.js包。新版本的 JSON 修改了 API，将 JSON.stringify() 和 JSON.parse() 两个要领都注入到了 Javascript 的内建对象里面，前者变成了 Object.toJSONString()，而后者变成了 String.parseJSON()。如果提示找不到toJSONString()和parseJSON()要领，则说明您的json包版本太低。3. JS操作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）的有序集合。一个数组以“”（左中括号）开始，“”（右中括号）结束。值之间运用 “,”（逗号）分隔。 例如： var jsonranklist=xlid:cxh,xldigitid:123456,topscore:2000,topplaytime:2009-08-20,xlid:zd,xldigitid:123456,topscore:1500,topplaytime:2009-11-20; 为了方便地处理JSON数据，JSON提供了json.js包，下载地址：/json.js 在数据传输流程中，json是以文本，即字符串的形式传递的，而JS操作的是JSON对象，所以，JSON对象和JSON字符串之间的相互转换是关键。例如： JSON字符串: var str1 = name: cxh, sex: man ; JSON对象: var str2 = name: cxh, sex: man ; 一、JSON字符串转换为JSON对象 要运用上面的str1，必须运用下面的要领先转化为JSON对象： /由JSON字符串转换为JSON对象 var obj = eval( + str + );或者 var obj = str.parseJSON(); /由JSON字符串转换为JSON对象 或者 var obj = JSON.parse(str); /由JSON字符串转换为JSON对象 然后，就可以这样读取： Alert(); Alert(obj.sex); 特别留心：如果obj本来就是一个JSON对象，那么运用 eval（）函数转换后（哪怕是多次转换）还是JSON对象，但是运用 parseJSON（）函数处理后会有疑问（抛出语法异常）。 二、可以运用 toJSONString()或者全局要领 JSON.stringify()将JSON对象转化为JSON字符串。 例如： var last=obj.toJSONString(); /将JSON对象转化为JSON字符 或者 var last=JSON.stringify(obj); /将JSON对象转化为JSON字符 alert(last); 留心： 上面的多个要领中，除了eval()函数是js自带的之外，其他的多个要领都来自json.js包。新版本的 JSON 修改了 API，将 JSON.stringify() 和 JSON.parse() 两个要领都注入到了 Javascript 的内建对象里面，前者变成了 Object.toJSONString()，而后者变成了 String.parseJSON()。如果提示找不到toJSONString()和parseJSON()要领，则说明您的json包版本太低。4. JS操作JSON总结 5JSON(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）的有序集合。一个数组以“”（左中括号）开始，“”（右中括号）结束。值之间运用 “,”（逗号）分隔。 例如： var jsonranklist=xlid:cxh,xldigitid:123456,topscore:2000,topplaytime:2009-08-20,xlid:zd,xldigitid:123456,topscore:1500,topplaytime:2009-11-20; 为了方便地处理JSON数据，JSON提供了json.js包，下载地址：/json.js 在数据传输流程中，json是以文本，即字符串的形式传递的，而JS操作的是JSON对象，所以，JSON对象和JSON字符串之间的相互转换是关键。例如： JSON字符串: var str1 = name: cxh, sex: man ; JSON对象: var str2 = name: cxh, sex: man ; 一、JSON字符串转换为JSON对象 要运用上面的str1，必须运用下面的要领先转化为JSON对象： /由JSON字符串转换为JSON对象 var obj = eval( + str + );或者 var obj = str.parseJSON(); /由JSON字符串转换为JSON对象 或者 var obj = JSON.parse(str); /由JSON字符串转换为JSON对象 然后，就可以这样读取： Alert(); Alert(obj.sex); 特别留心：如果obj本来就是一个JSON对象，那么运用 eval（）函数转换后（哪怕是多次转换）还是JSON对象，但是运用 parseJSON（）函数处理后会有疑问（抛出语法异常）。 二、可以运用 toJSONString()或者全局要领 JSON.stringify()将JSON对象转化为JSON字符串。 例如： var last=obj.toJSONString(); /将JSON对象转化为JSON字符 或者 var last=JSON.stringify(obj); /将JSON对象转化为JSON字符 alert(last); 留心：上面的多个要领中，除了eval()函数是js自带的之外，其他的多个要领都来自json.js包。新版本的 JSON 修改了 API，将 JSON.stringify() 和 JSON.parse() 两个要领都注入到了 Javascript 的内建对象里面，前者变成了 Object.toJSONString()，而后者变成了 String.parseJSON()。如果提示找不到toJSONString()和parseJSON()要领，则说明您的json包版本太低。5. JSON实例应用JSON实际就是一种数据格式，传递数据，特别的地方在于：JSON的数据格式可以直接构成JavaScript中的一个对象，因些可以在JavaScript很易容访问到它的数据。（个人的见解，关于JSON的其它资料可以去google一下）下面就应用一下JSON：使用JSON需要一些文件：将js对象转化成JSON的数据格式的JS如：json.js将Java对象转化成JSON的数据格式的jar包：json-lib-2.3-jdk15.jar等可以在下面的附件中获得我在我的工程中引入了这个文件（也可以不用这个文件，那么你需要自己在js或class中拼成JSON格式的数据）Html代码1. 2. 3. 4. 5. JSON学习6. 7. 8. 9. 10. 11. 12. 13. 14. 15. varxmlHttp; 16. functioncreateXMLHttpRequest() 17. if(window.ActiveXObject) 18. xmlHttp=newActiveXObject(Microsoft.XMLHTTP); 19. 20. elseif(window.XMLHttpRequest) 21. xmlHttp=newXMLHttpRequest(); 22. 23. 24. functiondoJSON() 25. varcar=getCarObject(); 26. /将JS对象转化成JSON格式的Text 27. varcarAsJSON=JSON.stringify(car); 28. alert(carAsJSON); 29. varurl=JsonTest1?timeStamp=+newDate().getTime(); 30. createXMLHttpRequest(); 31. xmlHttp.open(POST,url,true); 32. xmlHttp.onreadystatechange=handleStateChange; 33. xmlHttp.setRequestHeader(Content-Type,application/x-www-form-urlencoded); 34. xmlHttp.send(carAsJSON); 35. 36. /Ajax的回调方法 37. functionhandleStateChange() 38. if(xmlHttp.readyState=4) 39. if(xmlHttp.status=200) 40. parseResults(); 41. 42. 43. 44. /具体的回调作动 45. functionparseResults() 46. varresponseDiv=document.getElementById(serverResponse); 47. if(responseDiv.hasChildNodes() 48. responseDiv.removeChild(responseDiv.childNodes0); 49. 50. /xmlHttp.responseText是servlet中返回回来的JSON格式的数据，将它创建成一个js的node对象放到DIV中 51. varresponseText=document.createTextNode(xmlHttp.responseText); 52. responseDiv.appendChild(responseText); 53. /将json格式的Text转化成JSON对象：用eval(+response+) 54. varresultJson=eval(+xmlHttp.responseText+); 55. alert(resultJson); 56. alert(resultJson.make); 57. alert(resultJson.model); 58. alert(resultJson.year); 59. alert(resultJson.color); 60. 61. /JS中的一个对象 62. functionCar(make,model,year,color) 63. this.make=make; 64. this.model=model; 65. this.year=year; 66. this.color=color; 67. 68. /构成对象并返回 69. functiongetCarObject() 70. returnnewCar(Dodge,CoronetR/T,1968,yellow); 71. 72. 73. 74. 75. 76. 77. 78. ServerResponse:79. 80. 81. 82. 83. htmlview plaincopy1. 2. 3. 4. 5. JSON学习6. 7. 8. 9. 10. 11. 12. 13. 14. 15. varxmlHttp;16. functioncreateXMLHttpRequest()17. if(window.ActiveXObject)18. xmlHttp=newActiveXObject(Microsoft.XMLHTTP);19. 20. elseif(window.XMLHttpRequest)21. xmlHttp=newXMLHttpRequest();22. 23. 24. functiondoJSON()25. varcar=getCarObject();26. /将JS对象转化成JSON格式的Text27. varcarAsJSON=JSON.stringify(car);28. alert(carAsJSON);29. varurl=JsonTest1?timeStamp=+newDate().getTime();30. createXMLHttpRequest();31. xmlHttp.open(POST,url,true);32. xmlHttp.onreadystatechange=handleStateChange;33. xmlHttp.setRequestHeader(Content-Type,application/x-www-form-urlencoded);34. xmlHttp.send(carAsJSON);35. 36. /Ajax的回调方法37. functionhandleStateChange()38. if(xmlHttp.readyState=4)39. if(xmlHttp.status=200)40. parseResults();41. 42. 43. 44. /具体的回调作动45. functionparseResults()46. varresponseDiv=document.getElementById(serverResponse);47. if(responseDiv.hasChildNodes()48. responseDiv.removeChild(responseDiv.childNodes0);49. 50. /xmlHttp.responseText是servlet中返回回来的JSON格式的数据，将它创建成一个js的node对象放到DIV中51. varresponseText=document.createTextNode(xmlHttp.responseText);52. responseDiv.appendChild(responseText);53. /将json格式的Text转化成JSON对象：用eval(+response+)54. varresultJson=eval(+xmlHttp.responseText+);55. alert(resultJson);56. alert(resultJson.make);57. alert(resultJson.model);58. alert(resultJson.year);59. alert(resultJson.color);60. 61. /JS中的一个对象62. functionCar(make,model,year,color)63. this.make=make;64. this.model=model;65. this.year=year;66. this.color=color;67. 68. /构成对象并返回69. functiongetCarObject()70. returnnewCar(Dodge,CoronetR/T,1968,yellow);71. 72. 73. 74. 75. 76. 77. 78. ServerResponse:79. 80. 81. 82. 83. 在我的servlet中实现如下：Java代码1. publicclassJsonTest1extendsHttpServlet 2. 3. /*4. *5. */6. privatestaticfinallongserialVersionUID=306348969081510518L; 7. 8. publicvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse) 9. throwsServletException,IOException 10. this.doPost(request,response); 11. 12. 13. publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse) 14. throwsServletException,IOException 15. Stringjson=readJSONStringFromRequestBody(request); 16. System.out.println(json=+json); 17. /将request中接收的字符串转化成json对java对象18. JSONObjectjsonObject=JSONObject.fromObject(json); 19. System.out.println(jsonObject=+jsonObject.toString(); 20. System.out.println(jsonObject.getInt(year); 21. System.out.println(jsonObject.getString(make); 22. System.out.println(jsonObject.getString(model); 23. System.out.println(jsonObject.getString(color); 24. /设置返回的格式是text25. response.setContentType(text/plain); 26. response.getWriter().print(jsonObject); 27. 28. 29. privateStringreadJSONStringFromRequestBody(HttpServletRequestrequest) 30. StringBufferjson=newStringBuffer(); 31. Stringline=null; 32. try 33. BufferedReaderbufferRead=request.getReader(); 34. while(line=bufferRead.readLine()!=null) 35. System.out.println(line=+line); 36. json.append(line); 37. 38. catch(Exceptione) 39. e.printStackTrace(); 40. 41. returnjson.toString(); 42. 43. javaview plaincopy1. publicclassJsonTest1extendsHttpServlet2. 3. /*4. *5. */6. privatestaticfinallongserialVersionUID=306348969081510518L;7. 8. publicvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)9. throwsServletException,IOException10. this.doPost(request,response);11. 12. 13. publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)14. throwsServletException,IOException15. Stringjson=readJSONStringFromRequestBody(request);16. System.out.println(