ajax请求接口，jquery拼接数据循环

王小婷

发布于 2019-07-10 17:15:59

3K0

发布于 2019-07-10 17:15:59

关于上一篇写的文章，jquery拼接数据循环一个数据列表：https://cloud.tencent.com/developer/article/1461179。如果把json写在接口数据里面，使用ajax来调用，又该怎么样的使用？其实也很简单，首先将数据写在data.json文件里面，使用ajax的url请求之后，进行拼接即可。

data.json

[{
                    "image1": "images/fence/fence1.png",
                    "alarmtype": "sos",
                    "date": "2019-7-3 10:08",
                    "details": "李一男进入二道门危险区域",
                    "alarmname": "员工"
                },
                {
                    "image1": "images/fence/fence2.png",
                    "alarmtype": "危险",
                    "date": "2019-7-3 10:07",
                    "details": "孙二娘滞留生产车间8小时",
                    "alarmname": "访客"
                },
                {
                    "image1": "images/fence/fence3.png",
                    "alarmtype": "滞留",
                    "date": "2019-7-3 10:00",
                    "details": "马云脱岗窜岗报警",
                    "alarmname": "员工"
                },
                {
                    "image1": "images/fence/fence2.png",
                    "alarmtype": "脱岗",
                    "date": "2019-7-3 9:36",
                    "details": "王小婷走进办公室区域",
                    "alarmname": "访客"
                }
            ]

参考代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>告警列表</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <style>
            .rightcont {
                height: 80px;
                margin-top: 12px;
                background: #f1f1f1;
                border-radius: 8px;
                padding-top: 15px;
            }           
            .iconalarm {
                float: left;
                width: 20%;
                text-align: center;
            }           
            .detailalarm {
                float: left;
                width: 65%;
            }           
            .namealarm {
                float: left;
                width: 15%;
            }
        </style>
    </head>
    <body>
        <div id="active">
            <ul class="rightalarm">
                <!--右侧报警监控 -->
                <div class="rightcont">
                    <div class="iconalarm">
                        <img src="images/fence/fence2.png" />
                        <p>sos</p>
                    </div>
                    <div class="detailalarm">
                        <p>2019-7-3 10:08</p>
                        <p>王大治发出SOS报警</p>
                    </div>
                    <div class="namealarm">
                        员工
                    </div>
                </div>
            </ul>
    </body>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $.ajax({
            url: "data.json", //json文件位置
            type: "GET", //请求方式为get
            dataType: "json", //返回数据格式为json
            success: function(data) { //请求成功完成后要执行的方法 
                var html = "";
            $.each(data, function(i, item) { //这里的函数参数是键值对的形式，k代表键名，v代表值                
                html += '<div class="rightcont">';
                html += '<div  class="iconalarm">';
                html += '<img src=' + item.image1 + ' />';
                html += '<p>' + item.alarmtype + '</p> </div>';
                html += '<div  class="detailalarm">';
                html += ' <p>' + item.date + '</p>';
                html += ' <p>' + item.details + '</p></div>';
                html += ' <div  class="namealarm">' + item.alarmname + ' </div></div>';
            });
            $(".rightalarm").append(html);
            }
       })
        })
    </script>
</html>

好了，效果一样的。