Spring Boot整合Thymeleaf、Highcharts实现饼图时数据传递失败如何解决

算力阿峰

2026-9-29

解决方案

核心问题

你当前的/admin_home接口是视图渲染接口，AJAX请求该接口拿到的是完整HTML页面代码，而非饼图需要的JSON格式数据，所以无法完成图表渲染。

修正步骤

1. 拆分后端接口

将页面渲染和数据返回逻辑拆分，新增专门返回JSON数据的接口：

// 原页面渲染接口保留，仅用于返回HTML页面
@GetMapping("/admin_home")
public String viewHomePage(){
    return "Admin_Homepage";
}

// 新增数据接口，返回饼图需要的JSON数据
@GetMapping("/admin/pieChartData")
@ResponseBody
public List<CountCourse> getPieChartData(){
    return dashBoardRepository.countCourseByCategory();
}

注意：请确保CountCourse类的catName、catCount字段有公开的getter方法，如果使用Lombok可直接加@Data注解，否则Spring无法正常将对象序列化为JSON。

2. 修改前端AJAX请求配置

将AJAX的请求地址改为新增的数据接口，同时指定数据类型为JSON，可添加错误回调方便排查问题：

$.ajax({
    url: "/admin/pieChartData",
    dataType: "json", // 指定返回数据格式为JSON
    success: function(result){
        /* 原有逻辑保持不变 */
        var series = [];
        var data = [];
        for(var i = 0; i < result.length; i++){
            var object = {};
            object.name = result[i].catName.toUpperCase();
            object.y = result[i].catCount;
            data.push(object);
        }
        var seriesObject = {
            name: 'Course By Category',
            colorByPoint: true,
            data: data
        };
        series.push(seriesObject);
        drawPieChart(series);
    },
    // 新增错误回调，方便调试
    error: function(xhr, err){
        console.error("数据请求失败：", err, xhr.responseText);
    }
});