关于上一篇写的文章，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后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。
欢迎关注【编程微刊】公众号，回复【领取资源】,500G编程学习资源干货免费送。
