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

最新推荐文章于 2025-03-27 21:56:11 发布

Khun_HWJ

最新推荐文章于 2025-03-27 21:56:11 发布

阅读量580

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery ajax 文章标签： append()

本文链接：https://blog.youkuaiyun.com/Khun_HWJ/article/details/95335108

jquery 同时被 2 个专栏收录

160 篇文章

订阅专栏

ajax

8 篇文章

订阅专栏

博客主要讲述将接口A的HTML内容添加到接口B内容中时，可能出现添加不到指定位置的问题，原因是异步加载。解决办法是将接口A的内容放在接口B内容加载完之后再调用，避免添加失败。

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