ArrayList无法绑定到Thymeleaf表格，请求技术帮助

问题背景 #

使用Thymeleaf开发动态数据表格，API能正常返回响应，但两种数据绑定方法均失败：

方法一：jQuery AJAX绑定的问题与修复 #

原代码存在两处关键错误：

1. AJAX的url参数未加引号，语法错误
2. 直接将JSON对象插入DOM，未正确构建表格行结构

修复后的JavaScript代码：

$().ready(function () {
 getTableDetails();
});

function getTableDetails() {
    try {
        var ajaxCall;
        ajaxCall = $.ajax({
            url: '/getTableDetails', // 补全引号，确保路径正确
            type: 'GET',
            async: false,
            dataType: 'json'
        });
        ajaxCall.done(function (data, textStatus, jqXHR) {
            alert(JSON.stringify(data));
            var $tbody = $('#details');
            $tbody.empty(); // 清空原有模板内容
            $.each(data, function (i, p) {
                // 手动构建表格行与单元格
                var $tr = $('<tr></tr>');
                $tr.append($('<td></td>').text(p.id));
                $tr.append($('<td></td>').text(p.name));
                $tbody.append($tr);
            });
        });
        ajaxCall.fail(function (jqXHR, textStatus, errorThrown) {
            alert(textStatus + ' ' + errorThrown);
        });
    } catch (e) {
        console.error(e);
    }
}

方法二：Model传值的后端逻辑修复 #

原后端接口返回JSON数据，Model.addAttribute不会生效——Spring会直接将List<DataEntity>序列化为JSON返回，而非渲染Thymeleaf模板。需拆分接口：一个用于渲染页面并传递Model数据，另一个用于返回JSON（若需AJAX调用）。

修复后的Java代码：

// 页面渲染接口：传递Model数据给Thymeleaf
@RequestMapping(value = "/table-page", method = RequestMethod.GET)
public String getTablePage(Model model) {
    List<DataEntity> tableDetailList = new ArrayList<>();
    try {
       tableDetailList.addAll(repoCall); // 确保repoCall是正确的数据查询逻辑
    } catch (Exception ex) {
        ex.printStackTrace(); // 直接打印异常，避免getCause()空指针
    }
    model.addAttribute("tableDetailList", tableDetailList);
    return "table-page"; // 返回Thymeleaf模板名称（如templates/table-page.html）
}

// 保留JSON接口供AJAX调用（可选）
@RequestMapping(value = "/getTableDetails", method = RequestMethod.GET, produces = MediaType.APPLICATION_JSON_VALUE)
public List<DataEntity> getTableDetails() {
    List<DataEntity> tableDetailList = new ArrayList<>();
    try {
       tableDetailList.addAll(repoCall);
    } catch (Exception ex) {
        ex.printStackTrace();
    }
    return tableDetailList;
}

Thymeleaf模板部分无需修改，${row.id}或${row.getId()}均可正常使用，只要DataEntity类符合JavaBean规范（存在getId()、getName() getter方法）。

额外检查点 #

• 确保HTML根标签声明Thymeleaf命名空间：html xmlns:th="http://www.thymeleaf.org"
• 访问页面时需请求/table-page接口，而非返回JSON的/getTableDetails接口

内容的提问来源于stack exchange，提问作者Shinchan