AJAX 動態載入 JSP 片段：以容器 ID 為目標的局部更新模式

應用場景

單頁面應用（SPA）雛形：主頁面 main.jsp 左側導覽，右側容器 <div id="userlist"> 需無刷新載入 userlist.jsp 的表格資料。

架構圖解

main.jsp (框架頁)
├─ 左側導覽：按鈕「使用者列表」
└─ 右側容器：<div id="userlist"></div>

userlist.jsp (片段頁)
└─ 純 HTML 表格片段（含 JSTL forEach 迴圈），無 html/head/body 標籤

核心 JavaScript (jQuery)

function doAjax(targetId, actionUrl) {
    // targetId: 容器 ID，如 'userlist'
    // actionUrl: 後端處理路徑，如 '/user/list.action'
    $('#' + targetId).load(actionUrl);
}

// 導覽按鈕綁定
$('#btnUserList').click(function() {
    doAjax('userlist', '/user/list.action');
});

後端處理流程

1. Controller 接收請求，查詢資料庫取得 List<User>。
2. 將 List 放入 request scope：request.setAttribute("users", list);
3. Forward / Include 到 userlist.jsp 渲染片段。
4. 回傳純 HTML 片段給前端，jQuery .load() 自動注入容器。

userlist.jsp 範例

<%@ taglib prefix="c" uri="https://java.sun.com/jsp/jstl/core" %>
<table class="table">
    <thead><tr><th>ID</th><th>姓名</th><th>Email</th></tr></thead>
    <tbody>
        <c:forEach items="${users}" var="u">
            <tr>
                <td>${u.id}</td>
                <td>${u.name}</td>
                <td>${u.email}</td>
            </tr>
        </c:forEach>
    </tbody>
</table>

優缺點分析

進階：搭配載入動畫

function doAjax(targetId, actionUrl) {
    var $container = $('#' + targetId);
    $container.html('<div class="loading">載入中...</div>');
    $container.load(actionUrl, function(response, status, xhr) {
        if (status === 'error') {
            $container.html('<div class="error">載入失敗：' + xhr.status + '</div>');
        }
    });
}