Json实现页面多个对象的保存.docx

    男

    女

    男

    女

    男

     女

nage,age,sex对应Person对象的三个属性，也就是要保存三个对象到数据库中。

假设页面上三个对象的属性值分别为"tom"201,"jacky"210,"lily"221.则在js中通过','将这些值分隔,组装的字符串为

（"tom",20,1）:

（"jacky",21,0）:

（"lily",22,1）把这个值赋给userObj,并传到服务器上。

在服务器端的解析代码大致为：

（）

Stringstr=request.getParameter（"userObj"）;

String[]strArray=str.split（":

"）;

Personperson=newPerson（）;

for（Stringobj:

strArray）{

    String[]personArray=obj.split（","）;

    person.setName（personArray[0]）;

    person.setAge（personArray[1]）;

    person.setSex（personArray[2]）;

    personService.insert（person）;

}

但这样实现有个漏洞，就是当页面输入框中包含','时，那服务器解析时就不能将正确的值赋给person对象。

这几天研究了下json，就可以避免这个问题。

而且js和服务器端代码可以缩减很多。

jsonjava解析有十几种，我用的是json-lib,觉得他功能比较强大，有关它的语法官网上介绍得很详细，

在这就不多说了，可以参考

http:

//json- 

json数据格式很简单，比如{name:

"tom",age:

20,sex:

1}就表示一个person对象。

详细可以参考json官网

http:

//www.json.org 

在js中我把几个preson对象组装成一个数组,并把这个字符串赋给userObj然后提交表单.

varobjs=[{name:

"tom",age:

20,sex:

1},{name:

"jacky",age:

21,sex:

},{name:

"lily",age:

22,sex:

1}]

document.getElementById（"userObj"）.value=objs;

document.forms["userForm"].submit（）;

在服务器端的解析代码为：

Stringstr=request.getParameter（"userObj"）;

Listpersons=newArrayList（）;

if（str!

=null&&!

"".equals（str）） 

    list=getList（str,newPerson（））;

for（Personp:

list）

    personService.insert（p）;

下面是封装的方法

@SuppressWarnings（"unchecked"）

publicListgetList（Stringstr,Tt）{

    JSONArrayarray=JSONArray.fromObject（str）;//将str转换成json对象

    JsonConfigjsonConfig=newJsonConfig（）;//参数设置

    jsonConfig.setRootClass（t.getClass（））;//设置array中的对象类型

    Listlist=（List）JSONArray.toCollection（array,jsonConfig）;//将数组转换成T类型的集合

    returnlist;

}

2.JS操作JSON总结

JSON（JavaScriptObjectNotation）是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。

同时，JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不须要任何特殊的API或工具包。

   本文主要是对JS操作JSON的要领做下总结。

   在JSON中，有两种结构：

对象和数组。

   1.一个对象以“{”（左括号）开始，“}”（右括号）结束。

每个“名称”后跟一个“:

”（冒号）；“‘名称/值’对”之间运用“,”（逗号）分隔。

名称用引号括起来；值如果是字符串则必须用括号，数值型则不须要。

例如：

   varo={"xlid":

"cxh","xldigitid":

123456,"topscore":

2000,"topplaytime":

"2009-08-20"}；

   2.数组是值（value）的有序集合。

一个数组以“[”（左中括号）开始，“]”（右中括号）结束。

值之间运用“,”（逗号）分隔。

   例如：

   varjsonranklist=[{"xlid":

"cxh","xldigitid":

123456,"topscore":

2000,"topplaytime":

"2009-08-20"},{"xlid":

"zd","xldigitid":

123456,"topscore":

1500,"topplaytime":

"2009-11-20"}];

   为了方便地处理JSON数据，JSON提供了json.js包，下载地址：

http:

//www.json.org/json.js

   在数据传输流程中，json是以文本，即字符串的形式传递的，而JS操作的是JSON对象，所以，JSON对象和JSON字符串之间的相互转换是关键。

例如：

   JSON字符串:

   varstr1='{"name":

"cxh","sex":

"man"}';

   JSON对象:

   varstr2={"name":

"cxh","sex":

"man"};

   一、JSON字符串转换为JSON对象

   要运用上面的str1，必须运用下面的要领先转化为JSON对象：

   //由JSON字符串转换为JSON对象

   varobj=eval（'（'+str+'）'）;

或者

   varobj=str.parseJSON（）;//由JSON字符串转换为JSON对象

   或者

   varobj=JSON.parse（str）;//由JSON字符串转换为JSON对象

   然后，就可以这样读取：

   Alert（obj.name）;

   Alert（obj.sex）;

   特别留心：

如果obj本来就是一个JSON对象，那么运用eval（）函数转换后（哪怕是多次转换）还是JSON对象，但是运用parseJSON（）函数处理后会有疑问（抛出语法异常）。

   二、可以运用toJSONString（）或者全局要领JSON.stringify（）将JSON对象转化为JSON字符串。

   例如：

   varlast=obj.toJSONString（）;//将JSON对象转化为JSON字符

   或者

   varlast=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.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.

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  

2.  

3.    

4.      

5.      

6.      

7.      

8.          

9.      

10.      

11.      

12.    

13.    

14.    

15.    var xmlHttp;  

16.    function createXMLHttpRequest（） {    

17.        if （window.ActiveXObject） {    

18.            xmlHttp = new ActiveXObject（"Microsoft.XMLHTTP"）;    

19.        }     

20.        else if （window.XMLHttpRequest） {    

21.            xmlHttp = new XMLHttpRequest（）;    

22.        }    

23.    }  

24.    function doJSON（）{  

25.        var car = getCarObject（）;  

26.        //将JS对象转化成JSON格式的Text  

27.        var carAsJSON = JSON.stringify（car）;  

28.        alert（carAsJSON）;  

29.        var url = "JsonTest1?

timeStamp="+new Date（）.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.    function handleStateChange（）{  

38.        if（xmlHttp.readyState == 4）{  

39.            if（xmlHttp.status == 200）{  

40.                parseResults（）;  

41.            }  

42.        }  

43.    }  

44.    //具体的回调作动  

45.    function parseResults（）{  

46.        var responseDiv = document.getElementById（"serverResponse"）;  

47.        if（responseDiv.hasChildNodes（））{  

48.            responseDiv.removeChild（responseDiv.childNodes[0]）;  

49.        }  

50.        //xmlHttp.responseText是servlet中返回回来的JSON格式的数据，将它创建成一个js的node对象放到DIV中  

51.        var responseText = document.createTextNode（xmlHttp.responseText）;  

52.        responseDiv.appendChild（responseText）;  

53.        //将json格式的Text转化成JSON对象：

用eval（'（'+response+'）'）  

54.        var resultJson = 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.    function Car（make,model,year,color）{  

63.        this.make = make;  

64.        this.model = model;  

65.        this.year = year;  

66.        this.color = color;  

67.    }  

68.    //构成对象并返回  

69.    function getCarObject（）{  

70.        return new Car（"Dodge", "Coronet R/T", 1968, "yellow"）;  

71.    }  

72.    

73.    

74.    

75.        

76.            

77.      

78.    

Server Response:

79.      

80.          

81.