JS 實現表單文本框失焦自動查詢數據回填

需求場景

用戶在輸入框 1 輸入編號，移出焦點（或按下回車）後，自動從後端查詢對應數據並填充到輸入框 2，無需提交整個表單。

核心邏輯

1. 綁定輸入框 1 的 blur（失焦）或 keyup（按鍵彈起）事件
2. 事件觸發時發起 AJAX 請求，攜帶輸入值作為參數
3. 後端返回數據（JSON 或純文本）
4. 前端將返回值設置給輸入框 2

完整代碼示例

假設輸入框 ID 為 input1 和 input2，使用 jQuery：

$("#input1").on("blur", function() {
    var val = $(this).val().trim();
    if (!val) return; // 空值不查詢

    $.ajax({
        url: "/query",           // 後端接口
        data: { param: val },    // 傳參
        success: function(data) {
            // data 為後端直接返回的字符串或 JSON 對象
            $("#input2").val(data);
        },
        error: function() {
            console.error("查詢失敗");
        }
    });
});

事件選擇建議

後端配合要點

• 接口返回純文本或 {"value": "xxx"} 格式 JSON
• 若用原始 JDBC，確保查詢結果正確序列化
• 做好 SQL 注入防護（使用 PreparedStatement）

常見坑點

• 未判空導致頻繁無效請求
• 未處理 AJAX 錯誤回調，用戶無感知
• 輸入框 ID 拼寫錯誤導致選取器失效