ajax下拉框回顯資料_省市縣三級關聯下拉框的具體實作

功能需求：

①頁面中有三個下拉框選項，分别為省下拉框，市下拉框，區/縣下拉框

②選擇省，則市下拉框中出現對應的該省下的市資訊，選擇市則區/縣下拉框中出 現對應的該市下面的區/縣資訊。

需求分析（思路）：

①建立頁面：頁面中有三個下拉框，分别為省，市，區/縣

②頁面加載成功發起ajax請求，請求省的資訊，并将響應結果填充到省下拉框中

③選擇省觸發一個新的js函數的執行，該函數中發起新的ajax請求，請求該省下 的市資訊，并将響應資料填充到市下拉框。

④選擇市資訊觸發一個新的js函數的執行，該函數中發起新的ajax請求，請求該

市下的區/縣資訊，并将資料集填充到區/縣下拉框中。

如圖，我們把項目用MVC分層思想建構：

我們先建立VIEW層的JSP頁面：

<%
           

Contrller層的AreaServlet代碼以及dao具體實作類：

public class AreaServlet extends HttpServlet {
	@Override 
	protected void service(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		
		//設定請求編碼格式
		req.setCharacterEncoding("utf-8");
		//設定響應編碼格式
		resp.setContentType("text/html;charset=utf-8");
		//擷取請求資訊
		String parentid=req.getParameter("parentid");
		//處理請求資訊
			//建立服務層對象，将請求資料轉發給服務層對象處理
		AreaService as = new AreaServiceImpl();
		ArrayList<Area> al=as.selAreaInfo(parentid);
		//響應處理結果
				resp.getWriter().write(new Gson().toJson(al));
	}
}



           

最後是Model層的dao具體實作類：

public class AreaDaoImpl implements AreaDao {

	@Override
	public ArrayList<Area> selAreaInfoDao(String parentid) {
		//
		Connection conn=null;
		PreparedStatement ps=null;
		ResultSet rs=null;
		ArrayList<Area> al=null;
	
		String sql="select * from area where parentid=?";
		try{
			conn=DBUtil.getConnection();
			ps=conn.prepareStatement(sql);
			ps.setString(1, parentid);
			rs=ps.executeQuery();
			al=new ArrayList<Area>();
			while(rs.next()){
				Area area = new Area();
				area.setAreaid(rs.getInt("areaid"));
				area.setAreaname(rs.getString("areaname"));
				area.setParentid(rs.getInt("parentid"));
				area.setArealevel(rs.getInt("arealevel"));
				area.setStatus(rs.getInt("status"));
				al.add(area);
		
			}
		}catch(Exception e){
			e.printStackTrace();
		}finally{
			DBUtil.closeAll(rs, ps, conn);
		}
		return al;
	}

}
           

由于知乎上還不支援上傳源碼，如果有朋友需要的可以加我qq569193554.