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.