Ajax實現?

目標:利用Ajax從資料庫取出資料,實現下拉列表聯動。

工具/原料

Eclipse

原理

第一個下拉列表是由使用者想action傳送請求,直接將資料庫內容傳送到頁面,一級下拉列表進行獲取。第二個下拉列表則需要觸發第一個下拉列表的onchange事件,利用Ajax向action請求資料!

表設計

資料庫裡面建立兩張表,一張表是一級下拉列表,另外一張是二級下拉列表,同時二級下拉列表需要引用一級下拉列表的ID,如下圖所示:

Ajax實現 下拉列表聯動

Ajax實現 下拉列表聯動

Ajax實現 下拉列表聯動

頁面設計

頁面設計比較簡單,不廢話,但第一個下拉列表需要在介面載入時請求action,獲取一級下拉列表內容,同時繫結onchange事件,如下圖所示:

Ajax實現 下拉列表聯動

Ajax設計

建立XMLHttpRequest物件,如下圖所示:

Ajax實現 下拉列表聯動

處理函式,如下圖所示:需要修改請求的action路徑及引數,我這裡是根據ID來查詢二級選單。

Ajax實現 下拉列表聯動

回撥函式,如下圖所示:注意需要刪除一個元素,因為action裡面是以空格連線下拉列表的各項的,最後一個需要刪除,否則下拉列表會多出一個空項。

Ajax實現 下拉列表聯動

Action設計

獲取一級下拉列表,傳送給頁面,如下圖所示:

Ajax實現 下拉列表聯動

根據一級下拉列表的id請求二級下拉列表,注意空格,如下圖所示:

Ajax實現 下拉列表聯動

另外一種遍歷List的方法,如下圖所示:

Ajax實現 下拉列表聯動

XML設計

沒什麼好說的,上圖:

Ajax實現 下拉列表聯動

注意事項

Action中利用out物件輸出是,需要在out物件前面設定編碼格式,否則亂碼!

out.flush()及out.close()一定要放在迴圈體外面,否則只能獲取到一個物件!

小弟初學,若有不足,敬請雅正!

資料, 資料庫, 下拉,
相關問題答案