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

关于上一篇写的文章,jquery拼接数据循环一个数据列表:https://www.jianshu.com/p/d4034550fcf3。如果把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>

好了,效果一样的。

参考文章: ajax和axios请求本地json数据对比:https://www.cnblogs.com/wangting888/p/9701293.html 如何查看后端接口数据结构: https://www.jianshu.com/p/f5801320b106

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券