遇到的问题:
有两个接口分别为A和B ,要将A里的html append()
到 B当中的append()
的内容中,可能出现的问题就是 A中的内容添加不到B中的位置去,所以要考虑异步加载的问题
A接口内容如下:
function getfooterads(){
let para = {
"ppkid":ppkid,
"schid":schid
}
getfooterad(para).then((res) => {
if(res.code == 1){
var facontent = res.data.facontent;
var advhtml = '<div class="adv"><img src="'+facontent+'" width="100%"/><div>';
// 将 advhtml 内容 放到$('[data-role="tablebox"]')大盒子中 $('[data-role="advhtml"]')中,
// $('[data-role="tablebox"]')是异步加载来的盒子
$('[data-role="tablebox"]').find('[data-role="advhtml"]').html(advhtml);
}
})
}
getfooterads();
所以,需要将接口A的内容要放在B接口 append()
内容加载完之后,再调用
写法如下:
function getlevelreports(){
let para = {
"ppkid":ppkid,
"schid":schid
}
getlevelreport(para).then((res) => {
if(res.code == 1){
var levelreport = res.data.levelreport;
var userpaper = res.data.userpaper;
var schoollogo = levelreport.schoollogo;
var schoolshortname = levelreport.schoolshortname;
if(userpaper.length > 0){ //判断是否有好友,有好友才显示
var tablehtmltop = '';
var tablehtmlbtm = '';
tablehtmltop = '<table width="100%" class="table" id="tablevalue">'+
'<thead>'+
'<tr>'+
'<th width="12%">排名</th>'+
'<th width="42%">好友</th>'+
'<th width="18%">答题时长</th>'+
'<th width="13%">得分</th>'+
'<th width="15%">总排行</th>'+
'</tr>'+
'</thead>'+
'<tbody data-role="tbody">';
tablehtmlbtm = '</tbody></table><div style="margin:2rem 0 6rem;">'+
'<div data-role="advhtml"></div>'+ //添加广告的盒子
'<div><img src="'+schoollogo+'" class="fl"/>'+
'<span class="fl">'+schoolshortname+'出品</span></div></div>';
$('[data-role="tablebox"]').append(tablehtmltop + tablehtmlbtm);
getfooterads();//添加广告调用方法
}else{
$('[data-role="tablebox"]').append('<p>快去分享给好友一起PK吧</p>');
}
}
})
}
在$('[data-role="tablebox"]').append(tablehtmltop + tablehtmlbtm);
之后调用 getfooterads();//添加广告
这样就不会加不进去了。