Ajax获取到的数据如何展示在HTML
场景:通过Ajax请求,不跳转动态刷新table中的数据。
实例(为了演示方便,把这部分功能代码抽出来尽量能运行)
springboot后台controller接口代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
@RequestMapping("/getListByIdAndYear1") @ResponseBody public Object getListByIdAndYear1(@RequestBody InvestVo investVo) { if (ToolUtil.isEmpty(investVo)){ return null; } if (investVo.getInvestYear() == null){ SimpleDateFormat sdf = new SimpleDateFormat("yyyy"); Date date = new Date(); String investYear = sdf.format(date); System.out.println("今年是:"+investYear); investVo.setInvestYear(investYear); } List<YearInvestVo> yearInvestVoList = null; List total = new ArrayList(); List projectList = investVo.getProjectId(); System.out.println(projectList); String arr[]=new String[12]; //计划投资数组 String arr1[]=new String[12]; //计划投资数组 yearInvestVoList = yearInvestService.getListByIdAndYear(projectList,investVo.getInvestYear()); System.out.println(yearInvestVoList); if(yearInvestVoList.get(0) != null && !yearInvestVoList.isEmpty() && yearInvestVoList.size()>0){ arr[0] = yearInvestVoList.get(0).getPlanJanuary().toString(); arr[1] = yearInvestVoList.get(0).getPlanFebruary().toString(); arr[2] = yearInvestVoList.get(0).getPlanMarch().toString(); arr[3] = yearInvestVoList.get(0).getPlanApril().toString(); arr[4] = yearInvestVoList.get(0).getPlanMay().toString(); arr[5] = yearInvestVoList.get(0).getPlanJune().toString(); arr[6] = yearInvestVoList.get(0).getPlanJuly().toString(); arr[7] = yearInvestVoList.get(0).getPlanAugust().toString(); arr[8] = yearInvestVoList.get(0).getPlanSeptember().toString(); arr[9] = yearInvestVoList.get(0).getPlanOctober().toString(); arr[10] = yearInvestVoList.get(0).getPlanNovember().toString(); arr[11] = yearInvestVoList.get(0).getPlanDecember().toString(); arr1[0] = yearInvestVoList.get(0).getRealJanuary().toString(); arr1[1] = yearInvestVoList.get(0).getRealFebruary().toString(); arr1[2] = yearInvestVoList.get(0).getRealMarch().toString(); arr1[3] = yearInvestVoList.get(0).getRealApril().toString(); arr1[4] = yearInvestVoList.get(0).getRealMay().toString(); arr1[5] = yearInvestVoList.get(0).getRealJune().toString(); arr1[6] = yearInvestVoList.get(0).getRealJuly().toString(); arr1[7] = yearInvestVoList.get(0).getRealAugust().toString(); arr1[8] = yearInvestVoList.get(0).getRealSeptember().toString(); arr1[9] = yearInvestVoList.get(0).getRealOctober().toString(); arr1[10] = yearInvestVoList.get(0).getRealNovember().toString(); arr1[11] = yearInvestVoList.get(0).getRealDecember().toString(); } List<String> plan = Arrays.asList(arr); System.out.println("计划投资数据:"+plan); List<String> real = Arrays.asList(arr1); System.out.println("实际投资数据:"+real); List<YearInvestVo> yearList ; List<ProjectInfoVo> plist = new ArrayList<>(); List oneProject = new ArrayList<>(); String condition = null; for (int i = 0;i<projectList.size();i++){ ProjectInfoVo projectInfoVo = projectInfoService.getProListById1(condition, Integer.parseInt(projectList.get(i).toString().trim())); oneProject.add(projectList.get(i)); System.out.println(oneProject); yearList = yearInvestService.getListByIdAndYear(oneProject,investVo.getInvestYear()); System.out.println("投资信息:"+yearList); if(yearList.size()==1&&null==yearList.get(0)||yearList.size()==0){ }else{ projectInfoVo.setInvestTotal(yearList.get(0).getPlanYearTotal()); plist.add(projectInfoVo); } } System.out.println("投资信息:"+plist); JSONArray array= JSONArray.fromObject(yearInvestVoList.get(0)); System.out.println(array); Map map = new HashMap(); map.put("result",200); map.put("plist",plist); map.put("plan",plan); map.put("real",real); map.put("item",yearInvestVoList); return map; } |
arr1[0] = yearInvestVoList.get(0).getRealJanuary().toString();
arr1[1] = yearInvestVoList.get(0).getRealFebruary().toString();
arr1[2] = yearInvestVoList.get(0).getRealMarch().toString();
arr1[3] = yearInvestVoList.get(0).getRealApril().toString();
arr1[4] = yearInvestVoList.get(0).getRealMay().toString();
arr1[5] = yearInvestVoList.get(0).getRealJune().toString();
arr1[6] = yearInvestVoList.get(0).getRealJuly().toString();
arr1[7] = yearInvestVoList.get(0).getRealAugust().toString();
arr1[8] = yearInvestVoList.get(0).getRealSeptember().toString();
arr1[9] = yearInvestVoList.get(0).getRealOctober().toString();
arr1[10] = yearInvestVoList.get(0).getRealNovember().toString();
arr1[11] = yearInvestVoList.get(0).getRealDecember().toString();
}
List<String> plan = Arrays.asList(arr);
System.out.println("计划投资数据:"+plan);
List<String> real = Arrays.asList(arr1);
System.out.println("实际投资数据:"+real);
List<YearInvestVo> yearList ;
List<ProjectInfoVo> plist = new ArrayList<>();
List oneProject = new ArrayList<>();
String condition = null;
for (int i = 0;i<projectList.size();i++){
ProjectInfoVo projectInfoVo = projectInfoService.getProListById1(condition, Integer.parseInt(projectList.get(i).toString().trim()));
oneProject.add(projectList.get(i));
System.out.println(oneProject);
yearList = yearInvestService.getListByIdAndYear(oneProject,investVo.getInvestYear());
System.out.println("投资信息:"+yearList);
if(yearList.size()==1&&null==yearList.get(0)||yearList.size()==0){
}else{
projectInfoVo.setInvestTotal(yearList.get(0).getPlanYearTotal());
plist.add(projectInfoVo);
}
}
System.out.println("投资信息:"+plist);
JSONArray array= JSONArray.fromObject(yearInvestVoList.get(0));
System.out.println(array);
Map map = new HashMap();
map.put("result",200);
map.put("plist",plist);
map.put("plan",plan);
map.put("real",real);
map.put("item",yearInvestVoList);
return map;
}
因为Ajax要传递多组数据,我们定义一个实体类InvestVo 来接收前台传递的数据。
Ajax请求代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
$(function(){ //需要上传的参数 var adata = { "investYear" : null, "projectId" : p1 } var data = JSON.stringify(adata); $.ajax({ type : "POST", //通过POST方式上传请求 contentType : "application/json",//上传内容格式为json结构 data : data, //上传的参数 url: Feng.ctxPath + '/front/getListByIdAndYear1/', success:function (data) { console.log(data.item[0]); if(data.item[0] == null){ alert("没有数据!"); return ; } plan = data.plan; real = data.real; var planTotal = data.item[0].planTotal; var realTotal = data.item[0].realTotal; console.log("一:"+planTotal); console.log("二:"+realTotal); var trx1 = '<td>月计划投资</td>'+ '<td>'+data.item[0].planJanuary+'</td>'+ '<td>'+data.item[0].planFebruary+'</td>'+ '<td>'+data.item[0].planMarch+'</td>'+ '<td>'+data.item[0].planApril+'</td>'+ '<td>'+data.item[0].planMay+'</td>'+ '<td>'+data.item[0].planJune+'</td>'+ '<td>'+data.item[0].planJuly+'</td>'+ '<td>'+data.item[0].realAugust+'</td>'+ '<td>'+data.item[0].planSeptember+'</td>'+ '<td>'+data.item[0].planOctober+'</td>'+ '<td>'+data.item[0].planNovember+'</td>'+ '<td>'+data.item[0].planDecember+'</td>'+ '<td>'+data.item[0].planTotal+'</td>'; var trx2 = '<td>月落实投资</td>'+ '<td>'+data.item[0].realJanuary+'</td>'+ '<td>'+data.item[0].realFebruary+'</td>'+ '<td>'+data.item[0].realMarch+'</td>'+ '<td>'+data.item[0].realApril+'</td>'+ '<td>'+data.item[0].realMay+'</td>'+ '<td>'+data.item[0].realJune+'</td>'+ '<td>'+data.item[0].realJuly+'</td>'+ '<td>'+data.item[0].realAugust+'</td>'+ '<td>'+data.item[0].realSeptember+'</td>'+ '<td>'+data.item[0].realOctober+'</td>'+ '<td>'+data.item[0].realNovember+'</td>'+ '<td>'+data.item[0].realDecember+'</td>'+ '<td>'+data.item[0].realTotal+'</td>'; var trx3 = '<td>年度计划投资</td>'+ '<td colspan='3'>'+data.item[0].planFirstQuarter+'</td>'+ '<td colspan='3'>'+data.item[0].planSecondQuarter+'</td>'+ '<td colspan='3'>'+data.item[0].planThirdQuarter+'</td>'+ '<td colspan='3'>'+data.item[0].planFourthQuarter+'</td>'+ '<td>'+data.item[0].planTotal+'</td>'; var trx4 = '<td>年度落实投资</td>'+ '<td colspan='3'>'+data.item[0].realFirstQuarter+'</td>'+ '<td colspan='3'>'+data.item[0].realSecondQuarter+'</td>'+ '<td colspan='3'>'+data.item[0].realThirdQuarter+'</td>'+ '<td colspan='3'>'+data.item[0].realFourthQuarter+'</td>'+ '<td>'+data.item[0].realTotal+'</td>'; $("#mybody").append('<tr>'+trx3+'</tr>'); $("#mybody").append('<tr>'+trx4+'</tr>'); $("#mybody").append('<tr>'+trx1+'</tr>'); $("#mybody").append('<tr>'+trx2+'</tr>'); |
$.ajax({
type : "POST", //通过POST方式上传请求
contentType : "application/json",//上传内容格式为json结构
data : data, //上传的参数
url: Feng.ctxPath + '/front/getListByIdAndYear1/',
success:function (data) {
console.log(data.item[0]);
if(data.item[0] == null){
alert("没有数据!");
return ;
}
plan = data.plan;
real = data.real;
var planTotal = data.item[0].planTotal;
var realTotal = data.item[0].realTotal;
console.log("一:"+planTotal);
console.log("二:"+realTotal);
var trx1 = '<td>月计划投资</td>'+
'<td>'+data.item[0].planJanuary+'</td>'+
'<td>'+data.item[0].planFebruary+'</td>'+
'<td>'+data.item[0].planMarch+'</td>'+
'<td>'+data.item[0].planApril+'</td>'+
'<td>'+data.item[0].planMay+'</td>'+
'<td>'+data.item[0].planJune+'</td>'+
'<td>'+data.item[0].planJuly+'</td>'+
'<td>'+data.item[0].realAugust+'</td>'+
'<td>'+data.item[0].planSeptember+'</td>'+
'<td>'+data.item[0].planOctober+'</td>'+
'<td>'+data.item[0].planNovember+'</td>'+
'<td>'+data.item[0].planDecember+'</td>'+
'<td>'+data.item[0].planTotal+'</td>';
var trx2 = '<td>月落实投资</td>'+
'<td>'+data.item[0].realJanuary+'</td>'+
'<td>'+data.item[0].realFebruary+'</td>'+
'<td>'+data.item[0].realMarch+'</td>'+
'<td>'+data.item[0].realApril+'</td>'+
'<td>'+data.item[0].realMay+'</td>'+
'<td>'+data.item[0].realJune+'</td>'+
'<td>'+data.item[0].realJuly+'</td>'+
'<td>'+data.item[0].realAugust+'</td>'+
'<td>'+data.item[0].realSeptember+'</td>'+
'<td>'+data.item[0].realOctober+'</td>'+
'<td>'+data.item[0].realNovember+'</td>'+
'<td>'+data.item[0].realDecember+'</td>'+
'<td>'+data.item[0].realTotal+'</td>';
var trx3 = '<td>年度计划投资</td>'+
'<td colspan='3'>'+data.item[0].planFirstQuarter+'</td>'+
'<td colspan='3'>'+data.item[0].planSecondQuarter+'</td>'+
'<td colspan='3'>'+data.item[0].planThirdQuarter+'</td>'+
'<td colspan='3'>'+data.item[0].planFourthQuarter+'</td>'+
'<td>'+data.item[0].planTotal+'</td>';
var trx4 = '<td>年度落实投资</td>'+
'<td colspan='3'>'+data.item[0].realFirstQuarter+'</td>'+
'<td colspan='3'>'+data.item[0].realSecondQuarter+'</td>'+
'<td colspan='3'>'+data.item[0].realThirdQuarter+'</td>'+
'<td colspan='3'>'+data.item[0].realFourthQuarter+'</td>'+
'<td>'+data.item[0].realTotal+'</td>';
$("#mybody").append('<tr>'+trx3+'</tr>');
$("#mybody").append('<tr>'+trx4+'</tr>');
$("#mybody").append('<tr>'+trx1+'</tr>');
$("#mybody").append('<tr>'+trx2+'</tr>');
HTML页面展示代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<table class="table table-bordered"> <thead> <tr> <th>固定资产投资信息</th><th>1月</th><th>2月</th> <th>3月</th><th>4月</th><th>5月</th> <th>6月</th><th>7月</th><th>8月</th> <th>9月</th><th>10月</th><th>11月</th> <th>12月</th><th>合计</th> </tr> </thead> <tbody id="mybody"> </tbody> </table> |
</tbody>
</table>
效果: