KLOVEK

參考網路上的資源試寫了一個範例

1. 需要的 jar 檔 & js
    json-lib-2.2.1-jdk13.jar
    ezmorph-1.0.4.jar
    json2.js
2. jsp

<form name="data_form" action="servlet/wo_report" method="post" target="main" onSubmit="return checkdata(this)">
    <table bgcolor="#BAD8FF" width="50%" border="1" cellspacing="0" cellpadding="3" align="center">
        <tr>
            <td width="23%" align="right" valign="top"><font face="arial">Tech：</font></td>
            <td>
            <select name="techs" id="techs" size="6" multiple>
                <option value="0">---請選擇---</option>
                <option value="A000">A000</option>
                <option value="A001">A001</option>
            </select>
            </td>
        </tr>
        <tr>
            <td align="right" valign="top"><font face="arial">Partid：</font></td>
            <td>
            <select name="partid" id="partid" size="6" multiple>
                <option value="0">---請選擇---</option>
            </select>
            </td>
        </tr>
    </table>
</form>
.
.
.
<Script language="JavaScript" src="./js/json2.js"></Script>
<script language="JavaScript">
var xmlHttp;
function createXMLHttpRequest() {
    if (window.XMLHttpRequest) { // 如果可以取得XMLHttpRequest
        xmlHttp = new XMLHttpRequest();  // Mozilla、Firefox、Safari
    }
    else if (window.ActiveXObject) { // 如果可以取得ActiveXObject
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer
    }
}

var techList = document.getElementById("techs");
var partList = document.getElementById("partid");
var sURLInit = "servlet/wo_report";
var myObject;
partList.disabled = true;

techList.onchange = function()
{
    if(this.selectedIndex == 0)
    {
        partList.options.length = 0;
        partList.options[0] = new Option("---請選擇---",0);
        partList.disabled = true;
    }else{
        sURL = addURLParam(sURLInit,"tech",this.options[this.selectedIndex].value);
        //使用前面建立的 XMLHttpRequest 物件
        createXMLHttpRequest();
        xmlHttp.open("get",sURL,true);
       
        //接收資料的 callback 函數
        xmlHttp.onreadystatechange = function()
        {
            //4 的話才是接收到伺服器端的回應
            if(xmlHttp.readyState == 4)
            {
                techList.disabled = false;
                if(xmlHttp.status == 200)
                {
                    //接受資料成功，可以從 xmlHttp.responseText 取得傳回的資料
                    //轉換為json 的格式
                    myObject = JSON.parse(xmlHttp.responseText);
                   
                    //產生第二個選單的選項
                    partList.options.length = 0;
                    partList.options[0] = new Option("---請選擇---",0);
                    for(var i = 0, j = myObject.bindings.length; i<j; i++)
                    {
                        partList.options[i+1] = new Option(myObject.bindings[i],myObject.bindings[i]);
                    }
                    partList.disabled = false;
                }else{
                    //接收資料失敗，從 xmlHttp.statusText 取得錯誤資訊
                    //將錯誤資訊顯示在第二個選單中
                    partList.options[0] = new Option(xmlHttp.statusText,0);

                }
            }
        }
       
        techList.disabled = true;
       
        //送出 Ajax 要求
        xmlHttp.send(null);
    }
}

function addURLParam(url, sParamName, sParamValue)
{
    url = url + (url.indexOf("?") == -1 ? "?" : "&");
    url = url + encodeURIComponent(sParamName) + "=" + encodeURIComponent(sParamValue);
    return url;
}
</script>

3. servlet (wo_report.java)

    public void doGet(HttpServletRequest req,HttpServletResponse res)
          throws ServletException,java.io.IOException
    {
        JSONObject objProgressInfo = new JSONObject();
        ArrayList tmpList = new ArrayList();
       
        Statement stmt = null;
        ResultSet rs = null;
        String tech = req.getParameter("tech");
        String sql = "select partid from PROD where title = '" + tech + "' order by partid";
        try{
            stmt = con.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_UPDATABLE);
            rs = stmt.executeQuery(sql);
            rs.beforeFirst();
            while(rs.next())
            {
                tmpList.add(rs.getString("partid"));
            }
        }catch (SQLException e){
            System.out.println("wo_report.java SQLException="+e);
        }catch (Exception e){
            System.out.println("wo_report.java Exception="+e);
        }
       
        objProgressInfo.put("bindings",tmpList);

        PrintWriter out = res.getWriter();
        out.write(objProgressInfo.toString()); 
  
    }//end doGet

4. 資料參考出處
　JSON
　AJAX 學習筆記
　JSON Sample－大貓的家
　Ajax 兩層連動選單－小正正教室