jQuery根据后台查询到的数据动态往div中ul里面的li添加数据（同时动态添加li）

最新推荐文章于 2022-08-08 08:51:01 发布

快乐敲代码

最新推荐文章于 2022-08-08 08:51:01 发布

阅读量1w

点赞数 7

分类专栏：前端JS 文章标签： jQuery 动态添加li

本文链接：https://blog.csdn.net/qiaodaima0/article/details/98597962

版权

前端JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

直接看图和代码
页面：
js
下面这种写固定个数的li很不好，也不符合要求，如下
在这里插入图片描述
我们需要根据后台查到的数据，比如查到5条数据，那就页面显示5个li行数，查到3个就显示3个。
修改注意id 我们的操作是根据id进行绑定的

JS代码：

$(function(){
   $.ajax({
	            url :'这里写传到后台的路径',        
	            type: 'post',                 //获取数据方式:post/get           
	            async: false,                  //加载方式默认异步,true为同步
	            dataType:'json',            //数据格式
	            data : {
				//这里可以向请求路径携带数据传送 格式如：  startDate :startTime,
				},
	            success:function(data){
				if(data.res==1){//请求成功    res是返回数据的元素 （你们要换）
					if(data.obj!=null){//有数据  data.obj代表的是当前行数据的元素 （你们要换） 
						var parkName = data.obj.parkName; //获取景点名称
						var numberOfEntrance  = data.obj.numberOfEntrance;//获取进入人数
						var numberOfExit = data.obj.numberOfExit; //获取出去人数
						
						//动态添加li 同时动态添加数据
						 var str="";
						 for(var i=0;i<parkName.length;i++){
					    		str+="<li class='item'><p>"+parkName[i]+"</p><div class='text'><span class='in'>"+numberOfEntrance[i]+"</span><span class='out''>"+numberOfExit[i]+"</span></div></li>";
					            document.getElementById("parkNumber").innerHTML = str; 
					      };
						 //计算进入总人数  同时动态添加内容
						 var inTotal=0;
						 for(var i=0;i<numberOfEntrance.length;i++){
							 inTotal+=numberOfEntrance[i];
					      };
						 document.getElementById("span1").innerText=inTotal;
						 
					 //计算出去总人数  同时动态添加内容
						 var inTotal2=0;
						 for(var i=0;i<numberOfExit.length;i++){
							 inTotal2+=numberOfExit[i];    
					      };
						 document.getElementById("span2").innerText=inTotal2;
						
					}else{//无数据
					}
				}else{//代请求失败
				}
			},error:function(){
				//请求出错处理
			},    
	        });
});

后台代码：

@RequestMapping(value="映射名", method={RequestMethod.POST, RequestMethod.GET})
	@ResponseBody
	public AjaxRes getTourTicketStatFlow() {
		AjaxRes ar=getAjaxRes();
		Map<String, Object> map=new HashMap<String, Object>();		
	String sql = “这里写sql语句”；

	List<封装的实体> list =XXXXXervice.findBySql(sql);

	if(listIsEmpty(list)){
		ar.setFailMsg(Const.DATA_FAIL);
	}else{
		//景区名、进出总数
		String[] parkName = new String[list.size()];
		Integer[] numberOfEntrance = new Integer[list.size()];
		Integer[] numberOfExit = new Integer[list.size()];

		for(int i=0;i<list.size();i++){
			DwdTourTicketStatFlowD o = list.get(i);
			parkName[i] = o.getGroundName();
			numberOfEntrance[i] =o.getNumberOfEntrance();
			numberOfExit[i] = o.getNumberOfExit();
		}		
		map.put("parkName", parkName);
		map.put("numberOfEntrance", numberOfEntrance);
		map.put("numberOfExit", numberOfExit);
		ar.setSucceed(map, Const.DATA_SUCCEED);
	}
	return ar;
}