JSON数据填充表格——（三）-白红宇

JSON数据填充表格——（三）

阅读量：5051 次

发布时间：2019-06-12

本文共 2348 字，大约阅读时间需要 7 分钟。

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+ ""                );            }        }

效果:

转载于:https://www.cnblogs.com/qlqwjy/p/7307514.html

你可能感兴趣的文章