1. 程式人生 > >servlet物件通過json返回到前臺頁面並展示

servlet物件通過json返回到前臺頁面並展示

1、實體類

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;
	} 
}

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
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處理:
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頁面
<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>