直接看图和代码
页面:
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;
}