ajax实现区域-街道多级联动

未获得良好的阅读体验，请访问原文地址:传送门

前端代码示例：

$(document).ready(function(){
	$("#districtId").change(function(){
		//清空下拉框街道的选项
		$("#streetId option:gt(0)").remove();
		//获取要发送的数据
		var districtIdVal = $("#districtId").val();
		//如果没有选择区不进行ajax请求
		if(null == districtIdVal || "" ==  districtIdVal){
			return;
		}
		
		//发送ajax请求
		$.ajax({
			"url":"<%=path%>/house/getStreetByAjax",	//请求的地址				
			"type":"POST",	//发送请求的方式
			"data":{"districtId":districtIdVal},		//发送的数据
			"dataType":"json",		//定义服务端返回的数据格式
			"success":function(data){	//响应成功的回调函数
				 for(var i=0; i"+street.name+"");
					//将新节点添加到select标签下
					$("#streetId").append($option);
				 }
			},
			"error":function(error){		//响应失败的回调函数
				alert("请求失败:" + error.status );
			}
		});
		
	})
})

后台代码示例：

/*@responseBody注解的作用是将controller的方法返回的对象通过适当的转换器转换为指定的格式之后，写入到response对象的body区，通常用来返回JSON数据或者是XML
　　数据，需要注意的呢，在使用此注解之后不会再走试图处理器，而是直接将数据写入到输入流中，他的效果等同于通过response对象输出指定格式的数据。*/
@ResponseBody
@RequestMapping(value="/getStreetByAjax")
public List getStreetByAjax(Long districtId){
	System.out.println("id = " + districtId);
	List streets = districtService.getStreetByDistrictId(districtId);
	
	return streets;
}

代码解析：

1、首先在区域(district)下拉列表绑定一个方法：当选项被改变时，执行以下步骤：
1) 清空下拉框街道的选项(除了第一行)
2) 获取用户选择的区域项的value值(就是了解用户选了哪个城区，好在后台查出这个市区对应的街道)
3) 发送ajax请求(其实就是发送请求，和页面跳转、表单提交一个道理，只不过发出请求的不是整个页面，而是下拉框的个人行为，你可以这样理解)
PS: $.ajax方法的参数，也就是括号里面的语句是json格式，写法是固定的，就是一行行键值对，键名是固定的属性，值的意思注释写了

2、前端代码的ajax请求被发送到后台，请求地址：http://localhost:8080/u3-springmvc-t66/house/getStreetByAjax
并且request中有一个json类型的参数————用户选择的市区的value值，根据请求地址执行后台HouseController中的getStreetByAjax方法
1) 通过入参的方式拿到request中的市区id
2) 调用service层的districtService的方法，根据id从数据库拿到该市区的所有街道的list集合(由于我们还没有service层，这里只是模拟实现一下)
3) 把这个list以json形式返回(由注解：@ResponseBody自动实现)

3、最后这个后台响应返回前端页面，则响应成功，继续执行"success":中的回调函数
1) 将json形式的后台返回的街道的list遍历
2) 拿出每一个街道实体，每一个实体建立一个option标签
3) 把这些标签一个个补到下拉框下面
PS: 由于这些操作都只是下拉框的个人行为，当用户选择一个市区选项时，看到的页面本身没有变化，但实际上脚本已经把街道选项框重新组装