【四二学堂】jquery方式ajax获取数据并渲染页面

var newsData = '';
var mydata = {"pageNum":obj.curr,"pageSize":"5"};   //参数
newsData = getData(mydata); //通过ajax获取数据
pageNum = newsData.pageNum;

$(".news_content").html(showList(newsData.list));   //渲染到页面上


function getData(mydata){
    var thisData;
    $.ajax({
        type: "post",
        url: "http://127.0.0.1:8888/api/dict/list",
        data: JSON.stringify(mydata),   //如果是json对象的需要转成字符串
        contentType: "application/json",//提交参数格式为json数据
        dataType: "json",   //返回值也是json数据
        async: false,       //如果用异步，可能不等后台执行完就走回调函数，导致渲染页面失败
        success: function (data) {
            thisData = data.data;
        }
    })
    return thisData;
}

//渲染页面，拼接html
function showList(currData){

    var dataHtml = '';
            
    if(currData.length != 0){
        for(var i=0;i<currData.length;i++){
            dataHtml += '<tr>'
            +'<td><input type="checkbox" name="checked" lay-skin="primary" lay-filter="choose"></td>'
            +'<input type="hidden" name="id" id="id" value="'+currData[i].id+'" />'
            +'<td align="left">'+currData[i].type+'</td>'
            +'<td align="left">'+currData[i].dictkey+'</td>'
            +'<td align="left">'+currData[i].dictvalue+'</td>'
            +'<td align="left">'+currData[i].remark+'</td>';
            
            
            dataHtml += '<td>'+currData[i].ordernum+'</td>'
            +'<td><input type="checkbox" name="show" lay-skin="switch" lay-text="是|否" lay-filter="isShow"'+currData[i].dictkey+'></td>'
            +'<td>'+currData[i].createtime+'</td>'
            +'<td>'
            +  '<a class="layui-btn layui-btn-mini news_edit" data-id="'+currData[i].id+'"><i class="iconfont icon-edit"></i> 编辑</a>'
            +  '<a class="layui-btn layui-btn-normal layui-btn-mini news_collect" data-id="'+currData[i].id+'"><i class="layui-icon">&#xe600;</i> 收藏</a>'
            +  '<a class="layui-btn layui-btn-danger layui-btn-mini news_del" data-id="'+currData[i].id+'"><i class="layui-icon">&#xe640;</i> 删除</a>'
            +'</td>'
            +'</tr>';
        }
    }else{
        dataHtml = '<tr><td colspan="8">暂无数据</td></tr>';
    }
    return dataHtml;
}