使用jQuery与JSON数组填充HTML表格时出现Undefined错误

核心问题排查与修复 #

1. 给jQuery AJAX加上JSON解析声明 #

原生XHR能正常获取数据，说明Servlet返回的JSON格式没问题，但jQuery默认可能没把返回内容当成JSON解析，导致直接访问属性时拿不到值。

把你的jQuery请求改成这样：

$.ajax({
    url: 'http://localhost:8089/projectw/ServletJSON',
    type: 'GET',
    dataType: 'json', // 这行必须加，明确告诉jQuery返回的是JSON格式
    success: function(data) {
        // 先打印日志确认数据结构，避免瞎猜
        console.log(data);
        // 清空表格原有数据（保留表头）
        $('#tableBody').empty();
        // 遍历数据插入表格行
        $.each(data, function(i, item) {
            var newRow = '<tr>' +
                '<td>' + item.id + '</td>' + // 这里的键名要和Servlet返回的JSON完全一致
                '<td>' + item.name + '</td>' +
                '<td>' + item.email + '</td>' +
                '</tr>';
            $('#tableBody').append(newRow);
        });
    },
    error: function(xhr, err) {
        console.error('请求出错:', err);
    }
});

2. 严格核对JSON字段名与代码取值 #

比如你的Servlet返回的JSON是这样的：

[
    {"id": 1, "fullName": "张三", "userEmail": "zhangsan@test.com"},
    {"id": 2, "fullName": "李四", "userEmail": "lisi@test.com"}
]

那代码里就得写item.fullName、item.userEmail，大小写、拼写差一点都会出现undefined，必须完全匹配。

3. 确保Servlet返回正确的Content-Type #

如果上面两步还是不行，在Servlet代码里添加一行响应头，强制指定返回类型为JSON：

response.setContentType("application/json");

快速调试技巧 #

在success回调里先执行console.log(data)，打开浏览器F12查看控制台——要是打印出来是一串字符串而非对象数组，那就是JSON解析的问题，加上dataType: 'json'就能解决。

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