Jquery的ajax 三级联动 03

今天给大家上一下代码吧
jsp界面

开头引用自己写的js文件路径,注意引用顺序
js界面的代码大概思想我给你们捋一下：
首先进入Ajax，中的url 根据路径找到对应的servelet的后台处理方法，往下走，返回一个回调函数，date，这个date可以自己随便给，将得到省的id，将其加入option。
如果省的id，变动了，则根据省的id当作市的父id，进行查询就进行市的加入option
县区也是一样的

$(function(){
	var ctx=$("#ctx").val();
	
	$.ajax({
		url:ctx+"/regionServlet",
	    success:function(data){
	    	for(index in data){
	    		console.log(data[index]);
	    		$("#province").append("<option value='"+data[index].ID+"'>"+data[index].REGION_NAME+"</option>");//将省进行添加
	    	}
	    },
	    dataType:"json"
	});
	$("#province").change(function(){
		$("option:gt(0)","#city").remove();
		$("option:gt(0)","#county").remove();
		$.ajax({
			url:ctx+"/regionServlet?ID="+this.value,
		    success:function(data){
		    	for(index in data){
		    		console.log(data[index]);
		    		$("#city").append("<option value='"+data[index].ID+"'>"+data[index].REGION_NAME+"</option>");
		    	}
		    },
		    dataType:"json"
		});
		
	});
	
	$("#city").change(function(){
		
		$("option:gt(0)","#county").remove();
		
		$.ajax({
			url:ctx+"/regionServlet?ID="+this.value,
		    success:function(data){
		    	for(index in data){
		    		console.log(data[index]);
		    		$("#county").append("<option value='"+data[index].PARENT_ID+"'>"+data[index].REGION_NAME+"</option>");
		    	}
		    },
		    dataType:"json"
		});
	});
	
	
	
})

再给大家看一下后台 的一个查询共用方法 jsonBaseDao

public class JsonBaseDao extends BaseDao<Map<String, Object>>{

	public List<Map<String, Object>> executeQuery(String sql, PageBean pageBean)throws SQLException, InstantiationException, IllegalAccessException {
		return super.executeQuery(sql, pageBean, new callBack<Map<String, Object>>() {

			@Override
			public List<Map<String, Object>> foreach(ResultSet rs) throws SQLException, InstantiationException, IllegalAccessException {
				// TODO Auto-generated method stub
				// 1.利用反射 创建一个实例
				// 2.获取所有属性，并且赋值给实例
				// 3.将添加完值的实体类装入list容器中
				List<Map<String, Object>> list = new ArrayList<>();
				//获取源数据
				ResultSetMetaData md = rs.getMetaData();
				//获取列数
				int columnCount = md.getColumnCount();
				Map<String, Object> map=null;
				while(rs.next()) {
					map=new HashMap<>();
					for (int i = 1; i < columnCount; i++) {
						map.put(md.getColumnName(i), rs.getObject(i));
					}
					list.add(map);
				}

				return list;
			}
		});

	}

}

这个dao层方法，继承上面的JsonBaseDao

public List<Map<String, Object>> listR(Map<String, String[]> paraMap,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		String id=JsonUtil.getParamMap(paraMap, "ID");
		String sql="select * from ch_region where true ";
		if (StringUtils.isBlank(id)) {
			sql+="and PARENT_ID=7459";
		}else {
			sql+="and PARENT_ID="+id;
		}
		return super.executeQuery(sql, null);
	}
	}

下面的这个是servelet 调用上面的dao层

public class RegionServlet extends HttpServlet{

	private RegionDao rdao=new RegionDao();
	
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req, resp);
	}
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
	try {
		List<Map<String, Object>> list = rdao.listR(req.getParameterMap(), null);
		ObjectMapper om=new ObjectMapper();
		ResponseUtil.write(resp, om.writeValueAsString(list));
	} catch (InstantiationException e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	} catch (IllegalAccessException e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	} catch (SQLException e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	}
		
	}
}

写出最终的效果还需要一些架包，和其他的方法
我都截图如下

我不知道怎么上传这些架包，等我会了，就上传给你们
好了