接口返回的json字符串如下:

{"data":[{"image_url":"http:\/\/ybtestshop.gouwanmei.wang\/..\/..\/..\/public\/file\/ad\/20181229154507hall.png"},{"image_url":"http:\/\/ybtestshop.gouwanmei.wang\/..\/..\/..\/public\/file\/ad\/20181229154606hall1.png"},{"image_url":"http:\/\/ybtestshop.gouwanmei.wang\/..\/..\/..\/public\/file\/ad\/20181229154645hall2.png"},{"image_url":"http:\/\/ybtestshop.gouwanmei.wang\/..\/..\/..\/public\/file\/ad\/20181229154708hall3.png"},{"image_url":"http:\/\/ybtestshop.gouwanmei.wang\/..\/..\/..\/public\/file\/ad\/20181229154757hall4.png"},{"image_url":"http:\/\/ybtestshop.gouwanmei.wang\/..\/..\/..\/public\/file\/ad\/20181229154823hall5.png"}],"msg":"\u4e2d\u90e8\u5e7f\u544a\u56fe","code":"1"}

模板:

<script type="text/html" id="imgAdList">
   {{each data}}
	<div class="col-sm-12 col-xs-12">
		<a class="sc-gPEVay jZmIRd" href=""><img src="{{$value.image_url}}" alt=""></a>
	</div>
   {{/each}}	
</script>

渲染:

$.ajax({
	type:"post",
	url:"http://ybtestshop.gouwanmei.wang/home/index/imgAdList",
	dataType:"json",
	success:function(data){
		var html = template("imgAdList",data);
		var divResult = document.querySelector("#imgAdListbox");
		divResult.innerHTML = html;
	},
});

art-template官网:

http://aui.github.io/art-template/zh-cn/

发表评论

邮箱地址不会被公开。 必填项已用*标注