目標:利用Ajax從資料庫取出資料,實現下拉列表聯動。
工具/原料
Eclipse
原理
第一個下拉列表是由使用者想action傳送請求,直接將資料庫內容傳送到頁面,一級下拉列表進行獲取。第二個下拉列表則需要觸發第一個下拉列表的onchange事件,利用Ajax向action請求資料!
表設計
資料庫裡面建立兩張表,一張表是一級下拉列表,另外一張是二級下拉列表,同時二級下拉列表需要引用一級下拉列表的ID,如下圖所示:
頁面設計
頁面設計比較簡單,不廢話,但第一個下拉列表需要在介面載入時請求action,獲取一級下拉列表內容,同時繫結onchange事件,如下圖所示:
Ajax設計
建立XMLHttpRequest物件,如下圖所示:
處理函式,如下圖所示:需要修改請求的action路徑及引數,我這裡是根據ID來查詢二級選單。
回撥函式,如下圖所示:注意需要刪除一個元素,因為action裡面是以空格連線下拉列表的各項的,最後一個需要刪除,否則下拉列表會多出一個空項。
Action設計
獲取一級下拉列表,傳送給頁面,如下圖所示:
根據一級下拉列表的id請求二級下拉列表,注意空格,如下圖所示:
另外一種遍歷List的方法,如下圖所示:
XML設計
沒什麼好說的,上圖:
注意事項
Action中利用out物件輸出是,需要在out物件前面設定編碼格式,否則亂碼!
out.flush()及out.close()一定要放在迴圈體外面,否則只能獲取到一個物件!
小弟初學,若有不足,敬請雅正!