AJAX 請假流程：人員變更時如何重新獲取職等數據

問題場景

請假單根據請假人職等決定審批流程。前端通過 ajax_ExtOrgAccessor.findFuncsByUserOID(callback) 異步獲取職等，回調中設置 document.getElementById("N03_1").value = data[0].level。當請假人員切換時，需重新觸發查詢並更新字段。

解決方案

1. 綁定人員選擇控件的 change 事件

// 假設人員選擇是下拉框
document.getElementById("requesterSelect").addEventListener("change", function() {
    loadFuncsByCurrentUser();
});

2. 封裝加載函數，傳入當前用戶 OID

function loadFuncsByCurrentUser() {
    var userOID = getCurrentUserOID(); // 從頁面獲取當前選中人員的 OID
    if (!userOID) return;
    
    // 顯示加載狀態
    document.getElementById("N03_1").value = "加載中...";
    
    // 調用後台 AJAX，傳遞參數
    ajax_ExtOrgAccessor.findFuncsByUserOID(userOID, function(data) {
        if (data && data.length > 0) {
            document.getElementById("N03_1").value = data[0].level;
        } else {
            document.getElementById("N03_1").value = "未找到職等";
        }
    });
}

3. 後台接口調整（DWR/Java 示例）

// Java 端
public List<FuncInfo> findFuncsByUserOID(String userOID) {
    // 根據 userOID 查詢數據庫返回職等信息
    return dao.query("SELECT level FROM org_func WHERE user_oid = ?", userOID);
}

關鍵點

• 參數化查詢：原代碼無參數，需修改為接收 userOID。
• 防抖處理：若人員選擇為輸入框自動完成，添加 300ms 防抖避免頻繁請求。
• 錯誤處理：回調中判斷 data 有效性，失敗時給用戶提示。
• 緩存優化：同一人員多次切換可緩存結果，減少後台壓力。

完整前端流程圖

用戶切換請假人
    ↓
觸發 change 事件
    ↓
獲取新人員 OID
    ↓
調用 AJAX (異步)
    ↓
後台查詢數據庫
    ↓
返回 JSON 數據
    ↓
前端回調更新 N03_1 字段
    ↓
流程引擎讀取 N03_1 判斷審批路由

總結

核心是將查詢函數參數化，在人員變更事件中調用。若使用現代框架，可用 watch 監聽人員 ID 變化自動觸發請求。