jquery方式ajax获取数据并渲染页面

460 阅读1分钟

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.id+'" />'
+'<td align="left">'+currData.type+'</td>'
+'<td align="left">'+currData.dictkey+'</td>'
+'<td align="left">'+currData.dictvalue+'</td>'
+'<td align="left">'+currData.remark+'</td>';


dataHtml += '<td>'+currData.ordernum+'</td>'
+'<td><input type="checkbox" name="show" lay-skin="switch" lay-text="是|否" lay-filter="isShow"'+currData.dictkey+'></td>'
+'<td>'+currData.createtime+'</td>'
+'<td>'
+ '<a class="layui-btn layui-btn-mini news_edit" data-id="'+currData.id+'"><i class="iconfont icon-edit"></i> 编辑</a>'
+ '<a class="layui-btn layui-btn-normal layui-btn-mini news_collect" data-id="'+currData.id+'"><i class="layui-icon"></i> 收藏</a>'
+ '<a class="layui-btn layui-btn-danger layui-btn-mini news_del" data-id="'+currData.id+'"><i class="layui-icon"></i> 删除</a>'
+'</td>'
+'</tr>';
}
}else{
dataHtml = '<tr><td colspan="8">暂无数据</td></tr>';
}
return dataHtml;
}

---------------------
作者:十三亿少女的梦
来源:CSDN
原文:blog.csdn.net/qq_38187437…
版权声明:本文为博主原创文章,转载请附上博文链接!