servlet对象通过json返回到前台页面并展示

1、实体类

[java] view plain copy print ?

1. import java.util.ArrayList;  
2.   
3. public class ObjectType {  
4.   
5.     private String type;  
6.     private ArrayList<SubObjectType> subObjects;  
7.     public String getType() {  
8.         return type;  
9.     }  
10.     public void setType(String type) {  
11.         this.type = type;  
12.     }  
13.     public ArrayList<SubObjectType> getSubObjects() {  
14.         return subObjects;  
15.     }  
16.     public void setSubObjects(ArrayList<SubObjectType> subObjects) {  
17.         this.subObjects = subObjects;  
18.     }   
19. }  

import java.util.ArrayList;

public class ObjectType {

	private String type;
	private ArrayList<SubObjectType> subObjects;
	public String getType() {
		return type;
	}
	public void setType(String type) {
		this.type = type;
	}
	public ArrayList<SubObjectType> getSubObjects() {
		return subObjects;
	}
	public void setSubObjects(ArrayList<SubObjectType> subObjects) {
		this.subObjects = subObjects;
	} 
}

[java] view plain copy print ?

1. public class SubObjectType {  
2.   
3.     private String subtype;  
4.     private double fileCount;  
5.     private double bytes;  
6.     private String timeRange;  
7.     public String getSubtype() {  
8.         return subtype;  
9.     }  
10.     public void setSubtype(String subtype) {  
11.         this.subtype = subtype;  
12.     }  
13.     public double getFileCount() {  
14.         return fileCount;  
15.     }  
16.     public void setFileCount(double fileCount) {  
17.         this.fileCount = fileCount;  
18.     }  
19.     public double getBytes() {  
20.         return bytes;  
21.     }  
22.     public void setBytes(double bytes) {  
23.         this.bytes = bytes;  
24.     }  
25.     public String getTimeRange() {  
26.         return timeRange;  
27.     }  
28.     public void setTimeRange(String timeRange) {  
29.         this.timeRange = timeRange;  
30.     }  
31.       
32. }  

public class SubObjectType {

	private String subtype;
	private double fileCount;
	private double bytes;
	private String timeRange;
	public String getSubtype() {
		return subtype;
	}
	public void setSubtype(String subtype) {
		this.subtype = subtype;
	}
	public double getFileCount() {
		return fileCount;
	}
	public void setFileCount(double fileCount) {
		this.fileCount = fileCount;
	}
	public double getBytes() {
		return bytes;
	}
	public void setBytes(double bytes) {
		this.bytes = bytes;
	}
	public String getTimeRange() {
		return timeRange;
	}
	public void setTimeRange(String timeRange) {
		this.timeRange = timeRange;
	}
	
}

2、servlet：得到一个对象列表ArrayList<T>,将其转化为jsonArray

[java] view plain copy print ?

1. AccountInfoDao dao = new AccountInfoDao();  
2.         ArrayList<ObjectType> objectTypes = new ArrayList<ObjectType>();  
3.         objectTypes = dao.load();  
4.           
5.         JSONObject jsonObject = new JSONObject();  
6.         jsonObject.put("categorys", objectTypes);  
7.           
8.         JSONArray jsonArray = new JSONArray();  
9.         jsonArray.add(jsonObject);  
10.         System.out.println(jsonArray);  
11.         PrintWriter out = response.getWriter();  
12.         out.write(jsonArray.toString());  

AccountInfoDao dao = new AccountInfoDao();
		ArrayList<ObjectType> objectTypes = new ArrayList<ObjectType>();
		objectTypes = dao.load();
		
		JSONObject jsonObject = new JSONObject();
        jsonObject.put("categorys", objectTypes);
        
        JSONArray jsonArray = new JSONArray();
        jsonArray.add(jsonObject);
		System.out.println(jsonArray);
		PrintWriter out = response.getWriter();
		out.write(jsonArray.toString());

3、js处理：

[javascript] view plain copy print ?

1. function load(){  
2.     $.ajax({  
3.         type:"post",//请求方式   
4.         url:"servlet/AccountInfo",//发送请求地址   
5.         dataType:"json",  
6.         data:{//发送给数据库的数据   
7.         },  
8.         //请求成功后的回调函数有两个参数   
9.         success:function(data,textStatus){  
10.             var objs=eval(data); //解析json对象   
11.             var obj = objs[0];  
12.               
13.             var table = $("#table");  
14.             table.empty();  
15.             table.append('<tr><th></th><th>类别</th><th>文件个数</th><th>文件大小</th><th>时间范围</th></tr>');  
16.               
17.             if(obj==null || obj==""){  
18.                 table.append('<tr><td colspan="5" style="text-align: center; color:red">暂无数据！</td></tr>')  
19.                 //$("#page").hide();   
20.                 return false;  
21.             }  
22.               
23.             var categorys = obj.categorys;  
24.             for(var i=0;i<categorys.length;i++){  
25.                 var type = categorys[i].type;  
26.                 var subObjects = categorys[i].subObjects;  
27.                 var len = subObjects.length;  
28.                 table.append('<tr><td rowspan="'+len+'">'+type+'</td>'+'<td>'+subObjects[0].subtype+'</td>'+'<td>'+subObjects[0].fileCount+'</td>'+'<td>'+subObjects[0].bytes+'</td>'+'<td>'+subObjects[0].timeRange+'</td></tr>')  
29.                 //table.append('<td>'+subObjects[0].subtype+'</td>'+'<td>'+subObjects[0].fileCount+'</td>'+'<td>'+subObjects[0].bytes+'</td>'+'<td>'+subObjects[0].timeRange+'</td></tr>');   
30.                 for(var j=1;j<len;j++){  
31.                     table.append('<tr><td>'+subObjects[j].subtype+'</td>'+'<td>'+subObjects[j].fileCount+'</td>'+'<td>'+subObjects[j].bytes+'</td>'+'<td>'+subObjects[j].timeRange+'</td></tr>');  
32.                 }  
33.             }  
34.               
35.             //为鼠标移动添加样式，鼠标所在行变色，鼠标离开行恢复原状   
36.             $("tr:even").addClass("even");  
37.             $("th").first().css("text-align","left");  
38.             $("th").first().css("padding-left","5px");  
39.                 $("tr").mouseenter(function(){  
40.                                         $(this).addClass('bs');  
41.                                         });  
42.                 $("tr").mouseleave(function(){  
43.                                         $(this).removeClass('bs');  
44.                                         });  
45.         }  
46.     });  
47. }  

function load(){
	$.ajax({
		type:"post",//请求方式
	    url:"servlet/AccountInfo",//发送请求地址
	    dataType:"json",
		data:{//发送给数据库的数据
		},
		//请求成功后的回调函数有两个参数
		success:function(data,textStatus){
			var objs=eval(data); //解析json对象
			var obj = objs[0];
			
			var table = $("#table");
			table.empty();
			table.append('<tr><th></th><th>类别</th><th>文件个数</th><th>文件大小</th><th>时间范围</th></tr>');
			
			if(obj==null || obj==""){
				table.append('<tr><td colspan="5" style="text-align: center; color:red">暂无数据！</td></tr>')
				//$("#page").hide();
				return false;
			}
			
			var categorys = obj.categorys;
			for(var i=0;i<categorys.length;i++){
				var type = categorys[i].type;
				var subObjects = categorys[i].subObjects;
				var len = subObjects.length;
				table.append('<tr><td rowspan="'+len+'">'+type+'</td>'+'<td>'+subObjects[0].subtype+'</td>'+'<td>'+subObjects[0].fileCount+'</td>'+'<td>'+subObjects[0].bytes+'</td>'+'<td>'+subObjects[0].timeRange+'</td></tr>')
				//table.append('<td>'+subObjects[0].subtype+'</td>'+'<td>'+subObjects[0].fileCount+'</td>'+'<td>'+subObjects[0].bytes+'</td>'+'<td>'+subObjects[0].timeRange+'</td></tr>');
				for(var j=1;j<len;j++){
					table.append('<tr><td>'+subObjects[j].subtype+'</td>'+'<td>'+subObjects[j].fileCount+'</td>'+'<td>'+subObjects[j].bytes+'</td>'+'<td>'+subObjects[j].timeRange+'</td></tr>');
				}
			}
			
			//为鼠标移动添加样式，鼠标所在行变色，鼠标离开行恢复原状
			$("tr:even").addClass("even");
			$("th").first().css("text-align","left");
			$("th").first().css("padding-left","5px");
				$("tr").mouseenter(function(){
										$(this).addClass('bs');
										});
				$("tr").mouseleave(function(){
										$(this).removeClass('bs');
										});
		}
	});
}

4、jsp页面

[html] view plain copy print ?

1. <table width="100%" border="0" cellspacing="0" cellpadding="0" class="tab" id="table">  
2.     <tr>  
3.       <th></th>  
4.       <th>类别</th>  
5.       <th>文件大小</th>  
6.       <th>文件个数</th>  
7.       <th>时间范围</th>  
8.     </tr>  
9. </table>  

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="tab" id="table">
    <tr>
      <th></th>
      <th>类别</th>
      <th>文件大小</th>
      <th>文件个数</th>
      <th>时间范围</th>
    </tr>
</table>