使用多个ajax调用成功填充html表
使用多个ajax调用成功填充html表
提问于 2017-02-21 19:21:28
我正在使用ajax api调用来填充html表。表的第一列是The (item.name)，我嵌套了第二个ajax调用，以便用日期填充第二列(顺便说一句，日期是从纪元开始以微秒为单位返回的……我将在稍后对此进行格式化)。我嵌套的原因是因为第二个调用使用了url中第一个调用的部分结果。代码如下：
HTML
<div id="output">
<table id="scalaapi">
<tbody>
<tr><td></td><td class="uuid"></td></tr>
</tbody>
</table>
</div>AJAX
$.ajax({
type: 'GET',
url: "https://avacmd25.scala.com:44335/ContentManager/api/rest/players?offset=0&sort=name&filters=%7BplayerStatus%20:%20%7Bvalues:%5B'HEARTBEAT_OVERDUE'%5D,%20comparator%20:%20'eq'%7D%7D",
dataType: "json",
success: function(data) {
var list = data.list;
$.each(list, function(i, item) {
var tr = $('<tr>').append('<td>' + (item.name) + '</td>' + '<td>'+
$.ajax({
type: 'GET',
url: "https://avacmd25.scala.com:44335/ContentManager/api/rest/heartbeats/sequence/"+(item.uuid),
dataType: "text",
crossDomain: true,
success: $.each(function(results) {
$('.uuid').text(results);
})
})
+ '</td>');
$("#scalaapi").append(tr);
});
}
})我得到的结果好坏参半。第一个api调用按预期工作，尽管它跳过了第一行。第二个api调用仅返回第一条记录，并且没有跳过第一行，随后的行将显示object对象
结果屏幕截图-
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-02-21 20:04:57
您在代码中执行了大量操作，无需等待AJAX调用完成，即可立即执行操作。试着让你的javascript更有耐心一点(下面是伪代码，我去掉了大部分额外的AJAX配置内容，希望能让代码做得更清楚)：
$.ajax({..., success: function(data) {
// when we get here the first AJAX call has returned
// loop through each item in the response from the first AJAX call
$.each(data.list, function(i, item) {
// append the <tr> to the table with the information we have for the item and a placeholder for the second cell
var tr = $('<tr><td>'+item.name+'</td><td class="uuid">...</td></tr>').appendTo('#scalaapi');
// make the second AJAX call for this item
$.ajax({
url:".../sequence/"+item.uuid,
...,
success: function(result) {
// we now have the contents we need for the second <td>, so insert it
tr.find('.uuid').text(result);
}
});
});
});我相信这会让你更接近你想要做的事情？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42376126
复制![ajax html例子,AJAX实例[通俗易懂]](https://ask.qcloudimg.com/http-save/yehe-8223537/df3434e4d38371c74ed556b7bdcb008c.jpg)
相似问题
AJAX成功无法将数据填充表HTML
使用AJAX填充HTML表
成功使用javascript中的数组填充ajax调用后的表
使用ajax调用将json数据填充到html表中。
AJAX成功调用后的多个调用？
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
