ajax里拼接标签属性规则,ajax动态拼接ul标签

设置ul标签的id

动态拼接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 += '

标签的HTML放到标签下

$("#wlf").html(dataOptions);

}

});

}

3.后台接口数据

controller层：

@ApiOperation(value = "查询所有ADRC规则配置name", notes = "查询所有ADRC规则配置name")

@RequestMapping(value="/getAdrcList")

@ResponseBody

public MapgetAdrcList(){

Mapmap = new HashMap();

try {

map.put("code", 0);

map.put("data", detailsService.getAdrcList());

} catch (Exception e) {

map.put("code", 1);

throw e;

}

return map;

}

service层：

public ListgetAdrcList(){

return detailsDao.getAdrcList();

}

dao层：

public ListgetAdrcList(){

ListvoList = 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效果展示图：

大功告成~~~