Spring框架中如何处理Controller返回空JSON列表到HTML的场景

嘿，这个场景我碰到过好多次了，给你梳理两种实用的处理方案，从后端优化到前端友好提示都覆盖到：

直接返回空JSON数组[]本身是合法的，但对前端来说，很难区分“查询成功但无数据”和“接口异常”（比如某些错误场景也可能返回空）。更专业的做法是封装一个统一响应体，把状态、提示信息和数据打包返回，让前端能明确知道当前的情况。

比如先定义一个通用的响应DTO类：

public class ApiResponse<T> {
    private int code; // 自定义状态码，比如200=成功，204=无数据
    private String message;
    private T data;

    // 构造方法、getter/setter省略
    // 静态工厂方法快速创建实例
    public static <T> ApiResponse<T> success(T data) {
        ApiResponse<T> response = new ApiResponse<>();
        response.setCode(200);
        response.setMessage("查询成功");
        response.setData(data);
        return response;
    }

    public static <T> ApiResponse<T> noData() {
        ApiResponse<T> response = new ApiResponse<>();
        response.setCode(204);
        response.setMessage("未找到匹配的记录");
        response.setData(null); // 或者空列表，按需选择
        return response;
    }
}

然后在Controller里调整返回逻辑：

@RestController
@RequestMapping("/api")
public class YourController {
    @Autowired
    private YourService yourService;

    @GetMapping("/query")
    public ResponseEntity<ApiResponse<List<YourEntity>>> queryByName(@RequestParam String name) {
        List<YourEntity> result = yourService.queryByName(name);
        if (result.isEmpty()) {
            return ResponseEntity.ok(ApiResponse.noData());
        }
        return ResponseEntity.ok(ApiResponse.success(result));
    }
}

这样前端拿到的响应就会是类似{"code":204,"message":"未找到匹配的记录","data":[]}的格式，清晰明了。

不管后端是返回空数组还是封装后的响应，前端都要做判断，给用户明确的反馈，不然页面一片空白用户会懵。

举个用axios请求的示例：

document.getElementById('queryBtn').addEventListener('click', async function() {
    const inputName = document.getElementById('nameInput').value;
    try {
        const response = await axios.get('/api/query', { params: { name: inputName } });
        const data = response.data;
        
        // 如果是封装后的响应
        if (data.code === 204) {
            renderEmptyState(data.message);
        } else {
            renderResultList(data.data);
        }

        // 如果是直接返回空数组的情况，用下面的判断
        // if (data.length === 0) {
        //     renderEmptyState('未找到匹配的记录');
        // } else {
        //     renderResultList(data);
        // }
    } catch (error) {
        renderEmptyState('查询失败，请稍后重试');
    }
});

// 渲染空状态的函数
function renderEmptyState(message) {
    const resultContainer = document.getElementById('resultContainer');
    resultContainer.innerHTML = `<div class="empty-tip">${message}</div>`;
}

// 渲染正常结果列表的函数
function renderResultList(list) {
    const resultContainer = document.getElementById('resultContainer');
    const listHtml = list.map(item => `<div class="result-item">${item.name}</div>`).join('');
    resultContainer.innerHTML = listHtml;
}

核心就是：请求成功后判断数据是否为空，为空时渲染友好的提示文本，而不是让页面留白。

你也可以提前在HTML里写好隐藏的空状态模板，比如：

<div id="resultContainer">
    <!-- 默认隐藏空状态 -->
    <div id="emptyTip" class="empty-tip" style="display:none;">未找到匹配的记录</div>
</div>

然后在JS里根据情况显示/隐藏这个模板和结果列表，这样更灵活。

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