append()加载顺序调用多接口

8 篇文章 1 订阅

遇到的问题:
有两个接口分别为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();//添加广告
这样就不会加不进去了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值