AJAX 實作二級聯動下拉選單：從資料庫動態載入資料

架構概覽

• 前端：HTML + JavaScript (AJAX) + JSP 頁面片段。
• 後端：Java Servlet/Action (Struts) + JSP 回傳 <select> 選項片段。
• 流程：使用者選擇一級分類 → onchange 觸發 AJAX POST → 後端查詢資料庫 → 回傳二級選項 HTML → 前端注入 div。

前端 JavaScript (xmlhttp.js)

function send_request(callback, urladdress, isReturnData) {
    var xmlhttp = getXMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4) {
            try {
                if (xmlhttp.status == 200) {
                    if (isReturnData) callback(xmlhttp.responseText);
                } else {
                    callback("找不到頁面: " + urladdress);
                }
            } catch (e) {
                callback("請求失敗: " + e);
            }
        }
    };
    xmlhttp.open("POST", urladdress, true);
    xmlhttp.send(null);
}

function getXMLHttpRequest() {
    var xmlhttp;
    if (window.XMLHttpRequest) {
        try {
            xmlhttp = new XMLHttpRequest();
            xmlhttp.overrideMimeType("text/html;charset=UTF-8");
        } catch (e) {}
    } else if (window.ActiveXObject) {
        try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
        catch (e) {
            try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }
            catch (e) {
                try { xmlhttp = new ActiveXObject("Msxml3.XMLHTTP"); }
                catch (e) {}
            }
        }
    }
    return xmlhttp;
}

主頁面 JSP (含第一層下拉選單)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<html>
<head>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/xmlhttp.js"></script>
    <script type="text/javascript">
        function getProcess(value) {
            var process = document.getElementById('process');
            send_request(function(value2) {
                process.innerHTML = value2;
            }, "getProcessType.action?value=" + value, true);
        }
    </script>
</head>
<body>
<form action="" method="post" name="form">
    <select name="process" onchange="getProcess(this.value)">
        <option value="0" selected>請選擇流程種類</option>
        <option value="Y">業務流程</option>
        <option value="G">管理流程</option>
        <option value="Z">支持流程</option>
    </select>
    <div id="process">
        <select name="smallclass">
            <option value="一級流程名稱" selected>請選擇一級流程名稱</option>
        </select>
    </div>
    <input type="submit" value="提交">
</form>
</body>
</html>

後端 Action (Struts)

public String getProcessType() {
    HttpServletRequest request = ServletActionContext.getRequest();
    String value = request.getParameter("value");
    List<MyProcess> list = processService.getProcessByType(value);
    request.setAttribute("list", list);
    return SUCCESS;
}

回傳片段 JSP (ajax 回呼注入的內容)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/page/share/taglib.jsp"%>
<select name="smallclass">
    <option value="一級流程名稱" selected>請選擇一級流程名稱</option>
    <c:forEach items="${list}" var="myprocess">
        <option value="${myprocess.processID}">${myprocess.name}</option>
    </c:forEach>
</select>

關鍵點總結

1. 編碼一致性：前後端皆設定 UTF-8，避免中文亂碼。
2. 非同步回呼：使用 send_request 封裝，支援成功/失敗處理。
3. 片段注入：後端直接回傳 <select> HTML 片段，前端 innerHTML 置換，簡單有效。
4. 跨瀏覽器相容：getXMLHttpRequest 依序嘗試標準與 ActiveXObject 實作。