AJAX 與 request.setAttribute 互不相容：前後端資料傳遞正確模式解析

核心誤區

使用者嘗試在 AJAX 回呼中直接使用 JSP EL 表達式 ${fileNameMap}，期望後端 request.setAttribute("fileNameMap", map) 能自動渲染。這在傳統同步請求 (Forward/Include) 才有效，AJAX 完全不同機制。

同步請求 vs AJAX 請求對比

正確 AJAX 實作模式

後端 (Servlet/Controller)

@WebServlet("/api/files")
public class FileListServlet extends HttpServlet {
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) {
        Map<String, Object> data = getFileMap(); // 業務邏輯
        resp.setContentType("application/json;charset=UTF-8");
        new ObjectMapper().writeValue(resp.getWriter(), data); // Jackson 序列化
    }
}

前端 (jQuery/Fetch)

// jQuery 版
$.getJSON('/api/files', function(data) {
    // data 即為後端 Map 對應的 JS 物件
    let html = '';
    for (let key in data) {
        html += `<option value="${key}">${data[key]}</option>`;
    }
    $('#fileSelect').html(html); // 動態更新下拉選單
});

// Fetch 版 (現代瀏覽器)
fetch('/api/files')
  .then(r => r.json())
  .then(data => { /* 同上 DOM 操作 */ });

若必須在 JSP 頁面載入時預填資料

• 方案 A：JSP 直接 `` (同步 forward)。
• 方案 B：頁面載入後立即發 AJAX 取資料並渲染 (首屏延遲但架構乾淨)。
• 方案 C：後端將資料序列化為 JSON 嵌入頁面 ``，前端直接使用 (避免額外請求)。

總結

request.setAttribute 僅在伺服器端轉發鏈路生效。AJAX 是「前端主動索取資料、自行渲染」的範式，切勿混淆兩種模式。採用「後端輸出 JSON、前端消費 JSON」的統一協議，前後端分離才能徹底落地。