关于上一篇写的文章，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>
好了，效果一样的。
