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數據  尤其是前邊的刪除非常重要，  經驗在於積累  哈撒給 ヾ(◍°∇°◍)ﾉﾞ