将ajax数据循环遍历写入＜div＞中的卡片面板小记

页面展示

如下图，ajax获取后端数据循环遍历写入

中的卡片面板，每个卡片面板中放一条数据。

上代码

1.首先定义一个div

<div id="moreDiv"></div>

2.定义一个变量divHtml，用于存放页面元素。ajax请求获取数据，通过$.each遍历数据写入divHtml。最后使用document.getElementById(“moreDiv”).innerHTML = divHtml;将其插入div 区域。

var divHtml = "";
$.ajax({
    type : "post",
    async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
    url : "${request.contextPath}/line/para/equipmentStatus",    //请求发送到TestServlet处
    data : {"equipId":equipId},
    dataType : "json",        //返回数据形式为json
    success : function(result) {
        //请求成功时执行该函数内容，result即为服务器返回的json对象
        console.log(result.data);
        //console.log(data);
        $.each(result.data, function (index, item) {
        	console.log(item);
        	
        	divHtml += "<div style='padding: 20px; background-color: #F2F2F2;'><div class='layui-row layui-col-space15'>"+
            "<div class='layui-col-md12'><div class='layui-card'><div class='layui-card-header' style='background-color:"+ 
            (item.statusName=='离线'?"DarkGray":item.statusName=='空闲'?"DarkKhaki":item.statusName=='运行'?"SeaGreen":"Crimson") +";'>"+
            "<i style='font-size: 20px; color: white;'>"+item.equipId+"</i>"+
            "<i class='layui-icon layui-icon-username' style='font-size: 13px; color: #1EFF19;'>当日产出:"+item.outputToday+"</i>"+
            "</div><div class='layui-card-body'>"+
        	"<div class='grid-container' style='display: grid;grid: 50px / auto auto auto auto auto auto auto;"+
        	"grid-gap: 1px;padding: 1px;'><div class='item1'><ul style='text-align:center;'><li>"+item.spindleRate+"</li>"+
        	"<li>主轴倍率</li></ul></div><div class='item2'><ul style='text-align:center;'><li>"+item.feedRate+"</li>"+
        	"<li>进给倍率</li></ul></div><div class='item3'><ul style='text-align:center;'><li>"+item.fastFeedRate+"</li>"+
        	"<li>快速进给倍率</li></ul></div><div class='item4'><ul style='text-align:center;'><li>"+item.spindleSpeed+"</li>"+
        	"<li>主轴速度</li></ul></div><div class='item5'><ul style='text-align:center;'><li>"+item.feedSpeed+"</li>"+
        	"<li>进给速度</li></ul></div><div class='item6'><ul style='text-align:center;'><li>"+item.spindleLoad+"</li>"+
        	"<li>主轴负载</li></ul></div><div class='item7'><ul style='text-align:center;'><li>"+item.programName+"</li>"+
        	"<li>程序号</li></ul></div></div></div></div></div></div></div>";
        });
        document.getElementById("moreDiv").innerHTML = divHtml;


   },
    error : function(errorMsg) {
        //请求失败时执行该函数
    alert("请求数据失败!");
    }
});

最后

欢迎评论或私信，一起交流进步。