servlet 之 返回json數據並顯示

//實體類
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>