ajax动态拼接ul标签

1. 设置ul标签的id

<div style ="margin-left:300px; margin-top:80px;">
	<ul class="list-group" id ="wlf">
	</ul>
</div>

2. 动态拼接ul的数据

//页面加载的时候触发onDetails方法
$(function() {
	onDetails();
});


function onDetails(){
    $("#wlf").html("");//清空ul标签下的HTML代码
	$.ajax({
		url : "/details/getAdrcList",//调用后台接口
   		dataType : 'json',
		type : 'GET',
		success : function(dataInfo) {
			var dataOptions = '';
			if(dataInfo.code == 0){
				for(var i = 0; i < dataInfo.data.length; i++){
					dataOptions += '<li class="list-group-item">';
					dataOptions += '<a href="../adrc/detail'+dataInfo.data[i].id+'.jsp">'+dataInfo.data[i].name + "</a></li>";
					console.info("数据：---"+dataOptions);
				}
			}
			//将拼接好的<li>标签的HTML放到<ul>标签下
			$("#wlf").html(dataOptions);
   	    }
   	});
}

3.后台接口数据
controller层：

@ApiOperation(value = "查询所有ADRC规则配置name", notes = "查询所有ADRC规则配置name")
@RequestMapping(value="/getAdrcList")
@ResponseBody
public Map<String, Object> getAdrcList(){
	Map<String, Object> map = new HashMap<String, Object>();
	try {
		map.put("code", 0);
		map.put("data", detailsService.getAdrcList());
	} catch (Exception e) {
		map.put("code", 1);
		throw e;
	}
	return map;
}

service层：

public List<AdrcVo> getAdrcList(){
	return detailsDao.getAdrcList();
}

dao层：

public List<AdrcVo> getAdrcList(){
	List<AdrcVo> voList = new ArrayList<>();
	StringBuffer sf = new StringBuffer();
	sf.append("SELECT * FROM " + adrcTable);
	SqlRowSet rs = jt.queryForRowSet(sf.toString());
	AdrcVo vo = null;
	while(rs.next()){
		vo = purseVo(rs);
		voList.add(vo);
	}
	return voList;
}

private AdrcVo purseVo(SqlRowSet rs) {
	AdrcVo vo = (AdrcVo) ApplicationContextProvider.getApplicationContext().getBean(AdrcVo.class);
	vo.setId(rs.getInt("id"));
	vo.setName(rs.getString("name"));
	return vo;
}

接口数据展示图：

4.ajax动态拼接ul效果展示图：

大功告成~~~