以下是一个示例代码,演示了如何使用Ajax逐个附加数组数据:
HTML代码:
Ajax逐个附加数组数据
JavaScript代码:
$(document).ready(function() {
$('#loadData').click(function() {
$.ajax({
url: 'data.json', // 替换为实际的数据源URL
dataType: 'json',
success: function(data) {
appendData(data, 0); // 初始索引设为0
}
});
});
function appendData(data, index) {
if (index < data.length) {
var item = data[index];
var listItem = $('').text(item);
$('#dataList').append(listItem);
setTimeout(function() {
appendData(data, index + 1); // 递归调用,索引加1
}, 1000); // 延迟1秒加载下一个数据
}
}
});
data.json文件内容:
["数据1", "数据2", "数据3", "数据4", "数据5"]
在这个示例中,点击"加载数据"按钮会使用Ajax从data.json文件中获取数据。然后,通过递归调用appendData
函数,逐个将数据附加到#dataList
的
元素中。每个数据项都在1秒钟的延迟后加载,以实现逐个附加的效果。
上一篇:Ajax注册每个成功消息未显示