ajax循环如何拼接数据,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": "访客"

}

]

参考代码：

告警列表

.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%;

}

sos

2019-7-3 10:08

王大治发出SOS报警

员工

$(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 += '

';

html += '

';

html += '';

html += '

' + item.alarmtype + '

';

html += '

';

html += '

' + item.date + '

';

html += '

' + item.details + '

';

html += '

' + item.alarmname + '

';

});

$(".rightalarm").append(html);

}

})

})

好了，效果一样的。

原文作者：祈澈姑娘

90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。