JSP/AJAX 實現：文本框失焦異步查詢並回填 Textarea

需求：用戶在輸入框輸入值後失去焦點，後台根據該值查詢數據，將結果顯示在 <textarea> 中。典型的「自動完成/聯動查詢」場景，推薦使用 jQuery AJAX 實現。

前端實現（jQuery）

<input type="text" id="queryInput" name="queryInput" />
<textarea id="resultArea" name="resultArea" rows="5" cols="40"></textarea>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
$(function() {
    $('#queryInput').blur(function() {
        var keyword = $(this).val().trim();
        if (!keyword) return;

        $.ajax({
            url: 'QueryServlet', // 後台處理路徑
            type: 'POST',
            data: { keyword: keyword },
            dataType: 'json',
            success: function(resp) {
                if (resp.success) {
                    $('#resultArea').val(resp.data); // 回填查詢結果
                } else {
                    alert('查詢失敗：' + resp.msg);
                }
            },
            error: function() {
                alert('網絡請求異常');
            }
        });
    });
});
</script>

後端 Servlet 示例

@WebServlet("/QueryServlet")
public class QueryServlet extends HttpServlet {
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        String keyword = req.getParameter("keyword");
        // 業務查詢邏輯...
        String result = queryDatabase(keyword); // 返回字符串

        resp.setContentType("application/json;charset=UTF-8");
        PrintWriter out = resp.getWriter();
        out.write("{\"success\":true,\"data\":\"" + escapeJson(result) + "\"}");
    }
    // 簡單 JSON 轉義
    private String escapeJson(String s) {
        return s.replace("\\", "\\\\").replace("\"", "\\\"").replace("\n", "\\n").replace("\r", "\\r");
    }
}

關鍵點總結

• 綁定 blur 事件（或 change）觸發查詢。
• 使用 dataType: 'json' 規範數據交換格式。
• 後端返回結構化 JSON，前端精準回填 textarea 的 value（即 .val()）。
• 生產環境需加防抖（setTimeout）、loading 提示、錯誤重試等健壯性處理。