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

最新推荐文章于 2026-04-21 12:04:53 发布

原创最新推荐文章于 2026-04-21 12:04:53 发布 · 6.3w 阅读

20 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

java

该博客介绍了如何在Servlet中处理JSON对象，并将其返回到前端页面进行展示。内容涉及实体类的使用，以及Servlet与前端的数据交互过程。

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>