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>

效果:

Ajax获取到的数据如何展示在HTML

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

关注我们