JSP+JS实现用户搜索仅显操作按钮，用户值不显示问题求助

问题现象 #

酒店管理系统用户管理模块，页面加载时可正常展示所有用户数据，但按ID/用户名/邮箱搜索时，表格仅显示查看/删除按钮，ID、用户名等核心数据无法显示。已确认后端返回JSON格式正确，JSTL标签库配置正常。

核心问题分析 #

1. 后端Servlet重复输出JSON响应 #

查看后端searchUsers方法代码，发现同时使用Jackson的ObjectMapper和Gson两次输出JSON到响应流：

ObjectMapper objMap = new ObjectMapper();
objMap.writeValue(response.getWriter(), users); // 第一次输出JSON
// ...
String userJson = new com.google.gson.Gson().toJson(users);
response.getWriter().write(userJson); // 第二次输出JSON

这会导致响应体中包含两个连续的JSON数组（如[{"userId":1,...}][{"userId":1,...}]），属于无效JSON格式。前端res.json()解析时会出错，最终得到的users数据结构异常，无法正确读取userId、username等字段。

2. 前端潜在字段匹配风险（次要） #

虽然页面加载时JSTL能正常读取user.userId，需确认后端JSON序列化后的字段名与前端JS中使用的完全一致（如是否存在驼峰/下划线转换差异）。不过此问题并非当前现象的主因，页面加载正常说明字段映射是正确的。

解决方案 #

步骤1：修复后端重复输出问题 #

删除其中一种JSON序列化方式，保留任意一种即可。推荐统一使用Jackson（Spring生态常用）：

private void searchUsers(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    LOG.log(Level.INFO, "Searching users...");

    try {
        List<UserDTO> users = userService.searchUsers(request.getParameter("q"));
        if (users == null) {
            response.sendError(HttpServletResponse.SC_NOT_FOUND);
        } else {
            response.setContentType("application/json");
            response.setCharacterEncoding("UTF-8");

            // 仅保留一种JSON序列化方式
            ObjectMapper objMap = new ObjectMapper();
            objMap.writeValue(response.getWriter(), users);
            LOG.log(Level.INFO, "Users found: " + users.size());
        }
    } catch (Exception e) {
        // 补充异常处理，避免未捕获异常导致响应异常
        LOG.log(Level.SEVERE, "Search failed", e);
        response.sendError(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);
    }
}

步骤2：增强前端容错性 #

在前端增加字段存在性判断，避免因数据异常导致页面显示问题：

users.forEach(user => {
    console.log(user);
    const tr = document.createElement("tr");
    tr.innerHTML =
        `<td>${user?.userId || ''}</td>` +
        `<td>${user?.username || ''}</td>` +
        `<td>${user?.email || ''}</td>` +
        `<td>${user?.role || ''}</td>` +
        `<td>
            <a href="javascript:void(0)" onclick="openViewAndEditModal('${user?.userId || ''}')">View</a>
            |
            <a href="javascript:void(0)" onclick="openDeleteModal('${user?.userId || ''}')">Delete</a>
        </td>`;
    tableBody.appendChild(tr);
});

验证方法 #

1. 启动服务后，打开浏览器开发者工具（F12）→ 网络面板
2. 输入搜索关键词，查看/user/search接口的响应内容，确认是单一有效的JSON数组
3. 查看控制台console.log(user)输出，确认用户对象字段完整且可正常访问

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