1. 程式人生 > >jquery方式ajax獲取資料並渲染頁面

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;
}