1.定义页面请求JSON的按钮与定义一个带表头的表格

 请求数据的按钮

查询

 

 带表头的表格

     
                                  
                                       
                                            
序号
                                            
部门编号
                                            
部门名称
                                            
上级部门编号
                                            
描述
                                       
                                  
     

 

2.JS处理按钮点击事件与对传回来的JSON数据进行处理

1.点击请求JSON数据

/**         * 点击查询按钮，按条件查询部门信息         */        $("#condition_sub").click(function(){            defaultSearch();        });

 

function defaultSearch () {        $.ajax({            type : "post",            dataType : "json",            url : "searchUnitByCondition.action",            data : {                unitId :   $("#unit_id").val(),                unitName : $("#unit_name").val()            },            success : showTable        });    }

 

2. 服务器端对收到的请求处理

 

public String searchUnitByCondition(){        List
     
       baseUnitInfo;        try {            Map
      
        condition = new HashMap
       
        ();            condition.put("unitId", unitId);            condition.put("unitName", unitName);            System.out.println("map"+condition);            baseUnitInfo = unitService.getUnitByConditon(condition);            //将java对象转化为json对象            JSONArray jsonArray = JSONArray.fromObject(baseUnitInfo);            //返回给Ajax            this.result = jsonArray.toString();        } catch (SQLException e) {        }        return SUCCESS;    }
       
      
     

 

返回的JSON对象

[{"description":"","unitId":"10","unitName":"科技评估中心","upUnitId":""}]

3.JS对收到的数据填充表格

/**         * 显示表格         */        function showTable(result) {            var unitList = eval("(" + result + ")");            // 清空表格              $("#unitTable  tr:not(:first)").html("");            // 在表格中添加数据            for (var i = 0; i < unitList.length; i++) {                var index = i + 1;                $("#unitTable").append(                        "" + index+""                        + unitList[i].unitId + ""                        + unitList[i].unitName+ ""                        + unitList[i].upUnitId+ ""                        + unitList[i].description+ ""                );            }        }

 

效果: