不少系統都需要實現省市區三級聯動下拉,像人口信息管理、電子商務網站、會員管理等,都需要填寫地址相關信息。而用ajax實現的無刷新省市區三級聯動下拉則可以改善用戶體驗,目前基本上所有網站都是采用這一種方式。現在ajax的使用已經不像最初那樣使用最原始的方法了,因為有很多的js框架供我們選擇,我們只需要調用它們的一個方法就可以實現ajax功能,而其他的則交給js組件去完成。
最近整理了一份最新的全國省市區縣數據庫,再加上之前還沒有在jsp中實現過省市區三級聯動下拉,於是今天就花了一點時間結合jQuery框架來實現。
下面簡單描述一下老k這次利用jsp+jquery實現省市區三級聯動下拉的過程。
1.數據庫准備
本實例使用的數據是MySQL,把demo.sql導入到數據庫中即可。
2.Java后端
新建一個servlet,實現從數據庫中讀取數據,並把返回結果以json的格式輸出到前端。要使用servlet,還需要在web.xml中進行配置。
3.jsp前端
調用jquery ajax方法調用servlet獲取數據,前端利用json的相關js組件來把json字符串轉換成js對象並循環生成下拉選項數據。為第一級和第二級下拉分別加上onchange事件。
到此已經大功告成,具體的代碼可以下載本文java實例源碼:jsp結合jquery實現省市區三級聯動下拉源代碼查看,下載后用myeclipse導入並部署到tomcat就可以訪問項目看到效果了。程序比較容易擴展,如果數據齊全,實現n級聯動下拉也是輕而易舉的。
http://blog.csdn.net/kalision/article/details/39229953
http://pan.baidu.com/share/link?shareid=449587&uk=3288691396