servlet物件通過json返回到前臺頁面並展示
阿新 • • 發佈:2019-01-04
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>