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

 请求数据的按钮

<button class="btn btn-primary search_bar_button floatR" id="condition_sub">查询<span class=" glyphicon glyphicon-search span_icon"></span></button>

 带表头的表格

<table class="table table-bordered  table-hover" id="unitTable">

                            <thead>

                                <tr>

                                    <th>序号</th>

                                    <th>部门编号</th>

                                    <th>部门名称</th>

                                    <th>上级部门编号</th>

                                    <th>描述</th>

                                </tr>

                            </thead>

</table>

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<TBaseUnitInfo> baseUnitInfo;

        try {

            Map<String,Object> condition = new HashMap<String,Object>();

            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(

                        "<tr><td>" + index+"</td><td>"

                        + unitList[i].unitId + "</td><td>"

                        + unitList[i].unitName+ "</td><td>"

                        + unitList[i].upUnitId+ "</td><td>"

                        + unitList[i].description+ "</td></tr>"

                );

            }

        }

效果:

aaarticlea/png;base64,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" alt="" />