ajax返回数据进行for双循环实现前端html渲染数据的解决方案

漏刻有时 2020-09-17 15:31:28

分类专栏： javascript

最后发布:2020-09-17 15:31:28首次发布:2020-09-17 15:31:28

本文链接：https://blog.csdn.net/weixin_41290949/article/details/108644822

版权

在这里插入图片描述

    //历史告警;
    function getAlert() {
        var alertHtml = "";
        $.ajax({
            type: 'post',
            async: true,
            data: {},
            url: './api/api.php?act=getAlert&token=3cab7ce4142608c0f40c785b5ab5ca24',
            dataType: "json",
            success: function (res) {
                if (res.data) {
                    for (var i = 0; i < res.data.length; i++) {
                        alertHtml += `<div class="pannel"> <div class="title"><span>${res.data[i].curTime}</span><span>过高告警：${res.data[i].highState}</span><span>过低告警：${res.data[i].lowState}</span></div>`;
                        //循环当天记录;
                        if (res.data[i].days) {
                            alertHtml += ` <ul>`;
                            for (var j = 0; j < res.data[i].days.length; j++) {
                                var coBg = getClass(res.data[i].days[j].state);
                                alertHtml += `<li><span>${res.data[i].days[j].curTime}</span><span class="stuNum${coBg}"></span><span>${res.data[i].days[j].remark}</span>`;
                            }
                            alertHtml += ` </ul>`;
                        }
                        alertHtml += `</div>`;
                    }
                    $("#alertContent").html(alertHtml);
                }
            },
            error: function (err) {
                console.log(err + "请求数据失败!");
            }
        });
    }