ajax执行成功后，在success回调函数中把后台返回的list还原到html的table中

需求描述：前台通过onclick触发ajax，到后台返回一个list(json格式的)，把list插入到html的table中。

思路简介：￣□￣｜｜ 刚开始的时候，是没有思路的，就卡在了，怎么把 ajax 的回调函数的数据返回到页面上，(⇀‸↼‶) ，后来去度娘了一下，发现都是对table拼字符串   ( ‵o′)，贴代码

代码

后台代码：
public Object getDetail(String dName){
    List<Dict> list =  new ArrayList<>();
    try {
        Dict dict = dictService.findByDictName(dName);
        list = dictService.dectNameDetailList(dict.getDictId());
    } catch (Exception e){
        e.printStackTrace();
    }
    return list;
}

js代码：

var url = rootPath + '/sys/dict/getDetail';
var s = CommnUtil.ajax(url, {  //s相当于 function success(data){} 中的data 也就是后台返回的list，json数据格式
    dictName: dictName
}, "json");
if(!!s && s.length > 0){  //成功的回调函数 s相当于 function success(data){} 中的data 也就是后台返回的 list
    $('#dictTable tr:gt(0)').remove();//删除之前的数据     dictTable是html中table的id
    var item;
    $.each(s,function(i,result){
        item = "<tr><td>"+result['sortNo']+"</td><td>"+result['dictName']+"</td><td>"+result['dictCode']+"</td></tr>";
        $("#dictTableBody").append(item);
    });
}else{
    $('#dictTable tr:gt(0)').remove();//删除之前的数据
}
$('#res_tree').jstree("deselect_all",true);
$('#responsive_1').modal();

html代码：

<table id="dictTable" class="table table-striped table-bordered table-hover table-checkable order-column">
    <thead>
    <tr>
        <th>排序</th>
        <th>选项</th>
        <th>值</th>
    </tr>
    </thead>
    <tbody id="dictTableBody">
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    </tbody>
</table>

效果：

总结：关键点就两个  一个是删除之前的数据  一个是拼接list数据  尤其是前边的删除非常重要，  经验在于积累  哈撒给 ヾ(◍°∇°◍)ﾉﾞ