jquery方式ajax獲取資料並渲染頁面
阿新 • • 發佈:2018-12-21
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"></i> 收藏</a>' + '<a class="layui-btn layui-btn-danger layui-btn-mini news_del" data-id="'+currData[i].id+'"><i class="layui-icon"></i> 刪除</a>' +'</td>' +'</tr>'; } }else{ dataHtml = '<tr><td colspan="8">暫無資料</td></tr>'; } return dataHtml; }